LigerUI ligerComboBox详解 -

相约的旋律

浏览: 34104 次

最近访客更多访客>>

a6892509

shijianbang

liuyiwei112

whufish

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

LigerUI ligerComboBox详解

博客分类：

前端

应客户需求在下拉框添加搜索功能，想到 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>

分享到：