LigerUI ligerComboBox详解

最新推荐文章于 2022-03-23 09:32:42 发布

X_cross

最新推荐文章于 2022-03-23 09:32:42 发布

阅读量5.5k

点赞数

分类专栏：前端文章标签： javascript c# 测试 ViewUI

本文链接：https://blog.csdn.net/X_cross/article/details/84689452

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

应客户需求在下拉框添加搜索功能，想到 LigerUI 的 ligerComboBox能解决这个问题。于是动手修改之。

原代码是当跳转页面时加载数据列表，然后绑定到select元素中。

服务端代码：

public String dynamics(){
     clients = clientService.findAll();
     return "input";
}

JSP页面代码：

<s:select list="clients" name="client" listKey="id" listValue="clientName" cssStyle="width: 190px;" cssClass="text" headerKey="" headerValue="请选择"></s:select>

前面的代码太简单了，就不解释了。

下面解释一下用 ligerCombobox

<html>
       <head>
              <script type="text/javascript" src="/js/jquery/jquery.min.js"/>
              <script type="text/javascript" src="/js/ligerUI/js/ligerui.min.js"/>
              <script type="text/javascript">
                      $("#clients").ligerCombobox({
                             condition: { fields: [{ name: 'name', label:'客户名称',width: 120 }] },//搜索框的字段, name 必须是服务器返回的字段
                             grid: getGridOptions(true),
                             valueFieldID : 'id',
                             valueField: 'name',//请求参数key
                             textField: 'name',//搜索框输入的值
                             width : 310,
                             selectBoxHeight : 216,
 		             slide : false, //淡入淡出
 		             onSelected: function(id,name){//id为空值，name为选择的值
 			             $("#clients").val(name);//下拉框选择后文本框的值
 		             }
                       });
                       function getGridOptions(checkbox) {
                              var options = {
                              columns: [
             	              {display : '客户名称',isSort: false,name :  'name',width : 150},{display : '性别',isSort: false,name :  'sex',width : 80},{display : '联系电话',isSort: false,name :  'phone',width : 80} ],
                              switchPageSizeApplyComboBox: false,
                              //请求地址
			           url : "http://server/app/client-find.do",
                              pageSize: 10,
                              checkbox: false //是否显示checkbox false：否|checkbox：显示
                              };
                              return options;
                     }
              </script>
       </head>
       <body>
              <input id="clients" name="client" value=""/>
       </body>
</html>

X_cross

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
LigerUI ligerComboBox详解

应客户需求在下拉框添加搜索功能，想到 LigerUI 的 ligerComboBox能解决这个问题。于是动手修改之。原代码是当跳转页面时加载数据列表，然后绑定到select元素中。服务端代码：public String dynamics(){ clients = clientService.findAll(); return "input";...
复制链接

扫一扫