jquery.datables过滤封装(一)

用过jquery.dataTables的都知道该控件提供字段过滤功能。但针对中国用户的话,该过滤存在一个问题,没法根据拼音的首写字母来进行过滤。
比如某行记录里面存在”主任”,但你在表格中输入的是zr的话却检索不出来。但对于好多用户就会要求输入zr能根据首字母来进行检索,输入中文也能进行检索。
比如我现在表格数据如下:
这里写图片描述

修改前的话,你在搜索框中输入zr则效果就如下了,查询出的数据为空

这里写图片描述

必须要在搜索框中输入“主任”才能检索出数据

这里写图片描述

为了达到上面说的效果,我们首先需要做的就是引入2个关键js方法:
第一步:是判断输入的是中文还是英文

function isChinese(str){var badChar="ABCDEFGHIJKLMNOPQRSTUVWXYZ";badChar+="abcdefghijklmnopqrstuvwxyz";badChar+="0123456789";badChar+=" "+" ";badChar+="`~!@#$%^&()-_=+]\\\\|:;\"\\\'<,>?/";if(""==str){return false}for(var i=0;i<str.length;i++){var c=str.charAt(i);if(badChar.indexOf(c)>-1){return false}}return true}

第二步是:将中文转换成拼音的方法

function CC2FPY(l1){var l2=l1.length;var I1="";var reg=new RegExp('[a-zA-Z0-9\- ]');for(var i=0;i<l2;i++){var val=l1.substr(i,1);var name=arrayFSearch(val,PinYin);if(reg.test(val)){I1+=val;}else if(name!==false){I1+=name;}};I1=I1.replace(/ /g,'-');while(I1.indexOf('--')>0){I1=I1.replace('--','-');};return I1;}

第三步:则是修改jquery.datables的源文件的过滤方法。
找到

function _fnFilter( settings, input, force, regex, smart, caseInsensitive )

这句话滚动到方法底部。 将display = settings.aiDisplay;后面的代码替换成

var isChineseFlag = isChinese(input);
            for (i = display.length - 1; i >= 0; i--) {
                if (isChineseFlag) {
                    if (!rpSearch.test(settings.aoData[display[i]]._sFilterRow)) {
                        display.splice(i, 1);
                    }
                } else {
                    var cc2py = CC2FPY(settings.aoData[display[i]]._sFilterRow).toString().toLowerCase();
                    if (!rpSearch.test(cc2py)) {
                        display.splice(i, 1);
                    }
                }
            }

这时候就达到我们的要求了,输入“主任”的首写拼音字母zr可以匹配出相应的中文记录。
这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在使用jquery.jqGrid插件时,分页参数的封装可以通过设置`postData`属性来实现。 具体步骤如下: 1. 定义一个函数来封装分页参数: ```javascript function getGridData(pageNum, pageSize) { var postData = {}; postData.page = pageNum; postData.rows = pageSize; return postData; } ``` 其中,`pageNum`和`pageSize`分别表示当前页码和每页显示的记录数。 2. 在jqGrid初始化时,将上一步中定义的函数赋值给`postData`属性: ```javascript $("#grid").jqGrid({ url: "data.json", datatype: "json", colNames: ['ID', 'Name', 'Price'], colModel: [ {name: 'id', index: 'id', width: 55}, {name: 'name', index: 'name', width: 90}, {name: 'price', index: 'price', width: 80, align: "right"} ], rowNum: 10, rowList: [10, 20, 30], pager: '#pager', sortname: 'id', viewrecords: true, sortorder: "desc", postData: getGridData(1, 10) // 设置分页参数 }); ``` 在上面的代码中,`postData`属性的值是`getGridData(1, 10)`,表示默认显示第一页,每页显示10条记录。 3. 当用户点击分页按钮时,重新设置`postData`属性: ```javascript $("#grid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false}); $("#grid").jqGrid('navButtonAdd','#pager',{ caption:"Next", buttonicon:"ui-icon-arrowthick-1-e", onClickButton:function(){ var currentPage = $("#grid").getGridParam('page'); var pageSize = $("#grid").getGridParam('rowNum'); $("#grid").setGridParam({postData:getGridData(currentPage+1, pageSize)}).trigger("reloadGrid"); }, position:"last" }); ``` 在上面的代码中,当用户点击“Next”按钮时,会重新设置`postData`属性为`getGridData(currentPage+1, pageSize)`,即下一页的分页参数,然后重新加载表格数据。 通过上面的步骤,就可以实现jquery.jqGrid的分页参数封装

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值