jqGrid加载本地数据实现搜索功能

  • html代码
<div class="row" style="margin-left: 25px;">
    <input type="text" id="data_query"  style="width: 300px;" class="query-input-fixed" placeholder="价税合计">
 	是否勾选:
    <select id="ischecked_query"  style="width: 110px;">
         <option value="">==请选择==</option>
         <option value="1">已勾选</option>
         <option value="0">未勾选</option>
     </select>	
	<button type="button" class="btn btn-xs btn-info" onclick="querySearch()">查询</button>
</div>
<div class="row" style="margin-left: 25px;margin-top: 10px;">
     <table id="gridtable_result"></table>
      <div id="gridpager_result"></div>
</div>
var data=
[
	{id:“1,fpdm:“9521,fphm:“951,jshj:“100.00,ischecked:“0},
	{id:“2,fpdm:“9522,fphm:“952,jshj:“100.00,ischecked:“1},
	{id:“3,fpdm:“9523,fphm:“953,jshj:“100.00,ischecked:“0},
	{id:“4,fpdm:“9524,fphm:“954,jshj:“100.00,ischecked:“1},
	{id:“5,fpdm:“9525,fphm:“955,jshj:“100.00,ischecked:“0}
]
jQuery("#gridtable_result").jqGrid('clearGridData');//清空表格
//数据加载
jQuery("#gridtable_result").jqGrid('setGridParam', {
    datatype: 'local',
    data: data,//newData是符合格式要求的重新加载的数据
    rowNum: data.length,
    // rowList:[15,30,data.length],
    page: 1//哪一页的值
}).trigger("reloadGrid");

var gridSearch = new GridSearch("#gridtable_result",data);//创建实例
jQuery("#gridtable_result").jqGrid({
            data: [],
            datatype: "local",
            postData:{refresh:true},
            mtype: "POST",
            height:"600",
            width:"1293",
            colNames:["编号","发票代码","发票号码","价税合计","是否勾选"],
            colModel:[
                {name:"id",index:"ID",hidden:true,sortable:false},
                {name:"fpdm",index:"fpdm", width: 60,align:"center",sortable:true},
                {name:"fphm",index:"fphm", width: 60,align:"center",sortable:true},
                {name:"jshj",index:"jshj", width: 60,align:"center",sortable:true},
                {name:"ischecked",index:"ischecked", width: 60,align:"center",sortable:true,
                    formatter:function(cellvalue,options,rowobject){
                        if(cellvalue == -1 ){
                            return '<font style="color:green;">已勾选</font>';
                        }else {
                            return '<font >未勾选</font>';
                        }
                    }
                }
            ],
            subGridOptions:{
                plusicon:"ace-icon fa fa-plus center bigger-110 blue",
                minusicon:"ace-icon fa fa-minus center bigger-110 blue",
                openicon:"ace-icon fa fa-chevron-right center orange",
                reloadOnExpand:false
            },
            subGrid : false,
            scroll:false,
            viewrecords:true,
            rowNum:15,
            rowList:[15,30,45],
            pager:"#gridpager_result",
            recordtext: "{0} - {1}条 / 共{2}条",
            emptyrecords: "没有满足条件的数据",
            loadtext: "正在加载...",
            pgtext : "第 {0}页 /共{1}页",
            multiselect:true,
            multiboxonly:true,
            loadComplete : function() {
                fixJqGridUI(this);
            }
});
fixJqGridUI("#gridtable_result");
  • 搜索

function querySearch() {
    var query=jQuery("#data_query").val();
     var search_param = new Array(); //用于保存筛选规则
    // 筛选规则需要根据规则函数进行属性设置 rule_name:规则名称,每个规则名称对应一个方法,可以通过select方法查看; 后面的属性选项均为规则对应函数的参数
     search_param.push({rule_name:'vague',str:query,column:'jshj'});//价税合计  查询
     gridSearch.set_search_param(search_param);//提交设置规则
     gridSearch.search();//执行搜索
}

jQuery("#ischecked_query").change(function(){
      var ischecked = jQuery("#ischecked_query").val();
      var search_param = new Array(); //用于保存筛选规则
      // 筛选规则需要根据规则函数进行属性设置 rule_name:规则名称,每个规则名称对应一个方法,可以通过select方法查看; 后面的属性选项均为规则对应函数的参数
      search_param.push({rule_name:'vague',str:ischecked,column:'ischecked'});
      gridSearch.set_search_param(search_param);//提交设置规则
      gridSearch.search();//执行搜索

 });

  • 搜索插件
 var GridSearch = function (grid,data) {
     this.grid = jQuery(grid);
     this.search_param = null;
     // this.data = this.grid.jqGrid('getRowData');

     this.data = data;  //此时获取表格所有匹配的
     this.newData=[];
     /**
      * 显示全部行
      */
     this.showAllRow = function() {
         for (var i = 0; i < this.data.length; i++) {
             var result=this.newData.indexOf(this.data[i]);
             if ( result== -1){
                 this.newData.push(this.data[i]);
             }
         }
     };
     //设置筛选参数
     this.set_search_param = function (search_param) {
         this.search_param = search_param;
     };

     //筛选规则
     /*模糊筛选*/
     this.vagueSearch = function (str, column) {
         var re = new RegExp(str, "i");
         for (var i = 0; i < this.data.length; i++) {
             if (re.test(this.data[i][column])) {
                 var result=this.newData.indexOf(this.data[i]);
                 if ( result== -1){
                     this.newData.push(this.data[i]);
                 }
             }
         }
     };
     /*区间查找*/
     this.betweenSearch = function (start, end, column) {
         for (var i = 0; i < this.data.length; i++) {
             if (this.data[i][column] >= start && this.data[i][column] <= end) {
                 var result=this.newData.indexOf(this.data[i]);
                 if ( result== -1){
                     this.newData.push(this.data[i]);
                 }
             }
         }
     };
     /*根据参数选择规则筛选*/
     this.select = function (params) {
         switch (params.rule_name) {
             case 'between':
                 this.betweenSearch(params.start, params.end, params.column);
                 break;
             case 'vague':
                 this.vagueSearch(params.str, params.column);
                 break;
         }
     };
     //执行筛选
     this.search = function () {
         this.newData = [];
         if (this.search_param) {
             if ($.type(this.search_param) == 'array') {
                 for (var i = 0; i < this.search_param.length; i++) {
                     if (this.search_param[i]) {
                         this.select(this.search_param[i]);
                     }else{
                         this.showAllRow();
                     }
                 }
             } else {
                 this.select(this.search_param);
             }
         }else{
             this.showAllRow();
         }
         this.grid.jqGrid('clearGridData');//清空表格
         this.grid.jqGrid('setGridParam',{
             datatype:'local',
             data:this.newData,//newData是符合格式要求的重新加载的数据
             rowNum:15,
             rowList:[15,30,45],
             page:1//哪一页的值
         }).trigger("reloadGrid");
     }
};
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1687F

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值