自定义jqgrid的一些小技巧（五）

1.jqgrid编辑行、保存行、取消编辑，jqgrid编辑一行数据是分两步的，先编辑，再保存，点保存的时候才会向后台发请求，想自定义这些过程，请参考这一篇https://blog.****.net/dreamstar613/article/details/54613032

和这一篇https://blog.****.net/zacry/article/details/42508217

2.jqgrid的搜索，有两种方式：

第一种是用jqgrid自带的搜索功能，就是点击jqgrid最下面导航工具栏的放大镜按钮，弹出一个框，最新版jqgrid支持复杂的多字段查询，可选like、>、<、equal、not等各种运算符，如下图：

自定义jqgrid的一些小技巧（五）

//点击find时，执行以下功能

$("#btnSearch").click(function () {
    var rules = "";
    $("#multipleSearchDialog").each(function (i) {
        $(".div-padding :input").each(function () {
            if ($(this).val()) {
                rules += '"' + $(this).attr("name") + '":"' + $(this).val() + '"';
            }
        })
    });
    ParamJson = '{' + rules + '}';
    var postData = $("#grid-table").jqGrid("getGridParam", "postData");
    $.extend(postData, { Param: ParamJson });
    $("#grid-table").jqGrid("setGridParam", { search: true }).trigger("reloadGrid", [{ page: 1}]); //重载JQGrid
});

后台根据传过来的参数，拼成SQL语句查询

第二种是我们不用它自带的，而是自己在jqgrid上面定义一个form表单，让用户输入然后查询，如下图

自定义jqgrid的一些小技巧（五）

代码实现

首先，form表单和jqgrid当然要写好

其次，用js为表单的查询按钮添加响应函数，取form输入值，修改获取数据参数，并用新的参数reload grid，如下：

$("#searchForm").submit(function(){
    var client = $("#client").val();
    var amount = $("#amount").val();
    var tax = $("#tax").val();

    $("#grid-table").jqGrid("setGridParam",
        {url:"/user/getUserList?client="+ client +
            "&amount="+amount+
            "&tax="+tax, page:1, datatype:"json"}).trigger("reloadGrid");

});

3.jqgrid表格单元格校验，jqgrid为colModel中每一个字段都提供了editrule属性

colModel: [

    {name: 'key', index: 'key', width: 100, sorttype: "string", editable: false, align:"center"},
    {name: 'name', index: 'name', width: 100,
        editable: true,  //允许编辑
        editrules: {         
            edithidden:true, //即使该列隐藏也可编辑
            required:true,   //该列值不得为空
            custom:true,     //自定义校验规则
            custom_func:function(value, colNames){ //自定义校验函数实现
                            var regEn = /[`[email protected]#$%^&*()_+<>?:"{},.\/;'[\]]/im,
                                regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
                            if(regEn.test(value) || regCn.test(value)){
                                return [false, "不能包含特殊字符"]; // 这里表示，当返回false时弹出的警告内容
                            }else{
                                return [true,""]; //返回true则不弹出任何内容
                            }
                        }
                   },sorttype: "string",align:"center"},
    {name: "操作", index: "id", width: 150, align: "center"}

],

4.jqgrid设定行选中

//设定选中行,可设定多行选中：
$("jqgridtableid").jqGrid('setSelection',id1);
$("jqgridtableid").jqGrid('setSelection',id2);

5.获得所有行的id数组

var ids = $("jqgridtableid").jqGrid('getDataIDs');

6.jqgrid获取所有行数据的方法

参考https://blog.****.net/shenqingkeji/article/details/52861319

参考博客：https://www.cnblogs.com/hoojjack/p/7256197.html

https://blog.****.net/mengtianyalll/article/details/13502841

http://blog.51cto.com/mumufairy/1590966

https://www.cnblogs.com/hongzai/p/3160141.html
http://chuanlu.iteye.com/blog/1953544
https://www.cnblogs.com/MonaSong/p/5109991.html
http://z3sm2012.iteye.com/blog/1997782
https://my.oschina.net/yonge/blog/1941
http://mj4d.iteye.com/blog/1633462
https://zhidao.baidu.com/question/336030082.html
https://blog.****.net/sdta25196/article/details/74546999
http://www.iteye.com/problems/62397 jqgrid删除按钮
https://blog.****.net/zsq520520/article/details/53401328?utm_source=itdadao&utm_medium=referral
https://blog.****.net/sanbingyutuoniao123/article/details/52184656 删除行
https://blog.****.net/zhengxiangwen/article/details/50734604 jqgrid--获取所有选中的行并删除之
https://blog.****.net/qq_36687640/article/details/78550688 jqgrid表格修改当前行某个单元格的数据
https://www.cnblogs.com/cpcpc/p/7233898.html
https://www.cnblogs.com/landeanfen/p/5022188.html JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示
https://blog.****.net/jiudihanbing/article/details/22589105 jqgrid添加行
https://blog.****.net/dreamstar613/article/details/73275019 jqGrid 新增行保存新增的行到数据库
http://blog.mn886.net/jqGrid/ jqgrid实例中文版
https://www.cnblogs.com/lgq880821/p/6073070.html
https://www.cnblogs.com/lizihong/p/4075952.html jqGrid 各种参数详解
http://www.jb51.net/article/110620.htm js控制文本框禁止输入特殊字符详解
https://www.cnblogs.com/summer7310/p/7159665.html js正则验证特殊字符

https://blog.****.net/tangaoyu520hf/article/details/45893993 jqgrid属性详解

http://www.jb51.net/article/96908.htm

自定义jqgrid的一些小技巧（五）

相关推荐