首页 > 代码库 > Liger UI 表格数据查找/通过条件加载数据

Liger UI 表格数据查找/通过条件加载数据

api上的例子是在本地过滤的,无法使用,自己摸索了一下。

javascript代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//初始化ligerui控件
$(function (){
        maingrid = $("#maingrid").ligerGrid({
            columns: [
                { display: ‘类型‘, name:‘type‘},
                { display: ‘号码‘, name:‘number‘, editor:{type:‘text‘}},
                { display: ‘级别‘, name:‘level‘, editor:{type:‘text‘}}
            ],
            width: ‘100%‘,
            height:‘90%‘,
            enabledEdit: true,
            clickToEdit: false,
            //rownumbers:true,
            url:"<%=basePath%>number/getValidNumbers.action",
            parms:{numberFilter:$("#numberFilter").val(),numberArea:$("#numberArea").val()}  //此parms只在第一次加载时有效,之后刷新就不会获取查找条件了。
        //注意一下,parms而不是params,我开始写成params,怎么也传不进数据。不知道这个单词是不是作者写错了。
        });
         
    //另外,不要将$("form").serialize()当作参数传递给parms,因为serialize得到的数据是a=11&b=22这种形式,而parms需要的是对象。
    //alert($("form").serialize()); }); <br>
//查找号码
function search(){
    //params中获取过滤条件
    var params = { numberFilter:$("#numberFilter").val(),
              numberArea:$("#numberArea").val(),   //查询号码的过滤条件
              page:maingrid.options.page,      //注意:loadServerData不会再带上分页的信息,所以要手动加上分页的页数和每页个数。而表格的属性在maingrid的options里。
              pagesize:maingrid.options.pageSize  //注意2:grid加载ajax数据时,传递到后台的每页个数是pagesize,而表格的size属性用自动pageSize表示,S要大写。
            };
    //传入参数,调用loadServerData方法
    maingrid.loadServerData(params);
}

 

部分html代码如下:

<form id="gridParams">
	号码筛选:<input id="numberFilter" type="text" name="numberFilter" />
	号码区:<select name="numberArea" id="numberArea">
		<option value="http://www.mamicode.com/%">全部</option>
		<option value="http://www.mamicode.com/10">10</option>
		<option value="http://www.mamicode.com/20">20</option>
		<option value="http://www.mamicode.com/30">30</option>
		<option value="http://www.mamicode.com/40">40</option>
		<option value="http://www.mamicode.com/50">50</option>
		<option value="http://www.mamicode.com/60">60</option>
	</select>
	<input id="btnOK" type="button" value="http://www.mamicode.com/查找" onclick="search()" />
</form>

<div class="l-clear"></div> <br />
	<div id="maingrid"></div>
</body>

 

编辑器真糟糕,想在代码里着色都不行,直接把html标签显示出来了。-_-!


 

更新:

发现了一个问题:如果点击表格上的翻页或刷新,还是未过滤的数据。无奈,只能继续摸索了。


解决:修改了ligerGrid.js源码

在ligerGrid.js中搜索loadData方法:

//刷新数据
        loadData: function (loadDataParm)
        {
            var g = this, p = this.options;
            g.loading = true;
            g.trigger(‘loadData‘);
            var clause = null;
            var loadServer = true;
            if (typeof (loadDataParm) == "function")
            {
                clause = loadDataParm;
                if (g.lastData)
                {
                    g.data = http://www.mamicode.com/g.lastData;"boolean")
            {
                loadServer = loadDataParm;
            }
            else if (typeof (loadDataParm) == "object" && loadDataParm)
            {
                loadServer = false;
                p.dataType = "local";
                p.data = http://www.mamicode.com/loadDataParm;"server")
            {
                if (!p.sortOrder) p.sortOrder = "asc";
            }

       
       //--------------------------------------------------------------
       //这里是参数,有page和pagesize分页信息,所以在这部分加上我自己的查询信息
       //--------------------------------------------------------------
            var param = [];
            if (p.parms)
            {
                var parms = $.isFunction(p.parms) ? p.parms() : p.parms;
                if (parms.length)
                {
                    $(parms).each(function ()
                    {
                        param.push({ name: this.name, value: this.value });
                    });
                }
                else if (typeof parms == "object")
                {
                    for (var name in parms)
                    {
                        param.push({ name: name, value: parms[name] });
                    }
                }
            }
            if (p.dataAction == "server")
            {
                if (p.usePager)
                {
                    param.push({ name: p.pageParmName, value: p.newPage });
                    param.push({ name: p.pagesizeParmName, value: p.pageSize });
                    
            //---------------------------------------------------------------
            //:START  将页面的查询条件加到param参数中去
                    var numberFilter = document.getElementById("numberFilter").value; 
                  var numberArea = document.getElementById("numberArea").value;
                  if(numberFilter != null){
                  	param.push({name:"numberFilter", value:numberFilter});
                  }
                  if(numberArea != null){
                	param.push({name:"numberArea", value:numberArea});
                  }
                  //END 到这里结束。
                  //----------------------------------------------------------------
                }
                if (p.sortName)
                {
                    param.push({ name: p.sortnameParmName, value: p.sortName });
                    param.push({ name: p.sortorderParmName, value: p.sortOrder });
                }
            };
            $(".l-bar-btnload span", g.toolbar).addClass("l-disabled");
            if (p.dataType == "local")
            {
                g.filteredData = http://www.mamicode.com/p.data || g.currentData;"local" && !loadServer)
            {
                if (g.data && g.data[p.root])
                {
                    g.filteredData = http://www.mamicode.com/g.data;>

(代码编辑器真心糟糕!一个打不开,一个有时候又不生效。)

这样改虽然可以,但感觉还是不太好。

可以修改一下源码来复用。

例如:加个方法,加个全局数组,将数据加到数组中去,然后将参数加到loadData方法里。

有时间试试!