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

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

javascript代码:

//初始化ligerui控件
$(function (){
       	maingrid = $("#maingrid").ligerGrid({
       	    columns: [
       	        { display: '类型', name:'type'},
       	        { display: '号码', name:'number', editor:{type:'text'}},
       	    	{ display: '级别', name:'level', editor:{type:'text'}}
       	    ], 
       	     '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()); }); 
//查找号码 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="%">全部</option>
		<option value="10">10</option>
		<option value="20">20</option>
		<option value="30">30</option>
		<option value="40">40</option>
		<option value="50">50</option>
		<option value="60">60</option>
	</select>
	<input id="btnOK" type="button" value="查找" onclick="search()" />
</form>

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

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


更新:

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


解决:修改了ligerGrid.js源码

在ligerGrid.js中,搜索loadData方法:

 if (p.dataAction == "server")
            {
                if (p.usePager)
                {
                    param.push({ name: p.pageParmName, value: p.newPage });
                    param.push({ name: p.pagesizeParmName, value: p.pageSize });
                    
                    //2014.5.30修改
            //: START 将参数加到表格的param中,传到后台 var numberFilter = document.getElementById("numberFilter"); var numberArea = document.getElementById("numberArea"); if(numberFilter != null){ if(numberFilter.value != null){ param.push({name:"numberFilter", value:numberFilter.value}); } } if(numberArea != null){ if(numberArea.value != null){ param.push({name:"numberArea", value:numberArea.value}); } }   // END } if (p.sortName) { param.push({ name: p.sortnameParmName, value: p.sortName }); param.push({ name: p.sortorderParmName, value: p.sortOrder }); } };

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

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

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

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

有时间试试!


 2014/6/4更新

本来想自己写一个传参数的方法,看源码的时候发现已经有了=_=!当初看api没看仔细,汗!

setParm(name,value)方法可以设置传递给ajax的参数。LigerUI源码中方法如下:

setParm: function (name, value)
        {
            var g = this;
            var parms = g.get('parms');
            if (!parms) parms = {};
            if (parms instanceof Array)
            {
                removeArrItem(parms, function (p) { return p.name == name; });
                parms.push({ name: name, value: value });
            } else
            {
                parms[name] = value;
            }
            g.set('parms', parms);
        },

 即将设置的参数加到了parms变量中。而loadData方法中,下面这段代码将parms中的参数全部取出来放入param中了:

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] });
                    }
                }
            }

最后,如果从服务器加载数据,将param传递:

g.loadServerData(param, clause);

loadServerData方法实际上就是用ajax调用远程数据,param直接传给了data参数。

所以,我自己的js代码只写了一个刷新方法,直接设置了查询的参数,查询时直接调用这个方法即可:

//刷新
function refresh(){
	maingrid.setParm("numberFilter",$("#numberFilter").val());
	maingrid.setParm("numberArea",$("#numberArea").val());
	
	maingrid.reload();
}

 另外,ajax方法可以这样写:先设置参数变量,再调用ajax方法。这样参数设置更灵活。

$.ajax(ajaxOptions);

  

原文地址:https://www.cnblogs.com/skyeyh/p/3760803.html