jqgrid行内编辑，保存

标签： jqgrid

2017-01-19 11:27 2302人阅读 评论(1) 收藏 举报

分类：

jQuery控件（9）

 编辑行，保存编辑，取消编辑

html代码

    <div class="panel-body">
        <table id="list" style="heigth: 1000px"></table>
        <div id="pager"></div>
    </div>
1
2
3
4
1
2
3
4

js代码

$("#list" ).jqGrid({
       colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
            {name : 'id',index : 'id',width : 100,align : 'right'},
            //第一步：把upperLimit列设置可编辑
            {name : 'upperLimit',index : 'upperLimit',width : 150,align : "right",editable : true},
            {name : 'lowerLimit',index : 'lowerLimit',width : 150,align : "right",editable : true}, 
            {name : 'edit',index : 'edit',width : 100,height : 300,align : "right"}],
        gridComplete : function() { // 第二步：数据加载完成后 添加操作按钮  
            var ids = jQuery("#list").jqGrid('getDataIDs'); //获取表格的所有列
            for (var i = 0; i < ids.length; i++) {
                var id = ids[i];
                var editBtn = "<div class='btnBox'> "
                                + "<button type='button'  onclick='editParam("
                                + id
                                + ")'>编辑</button>"
                                + "<button type='button' onclick='saveParam("
                                + id
                                + ")'>保存</button>"
                                + "<button type='button'  onclick='cancelParam("
                                + id + ")'>取消</button> </div>"

                jQuery("#list").jqGrid('setRowData',ids[i], {edit : editBtn}); //给每一列添加操作按钮
                }//end for (var i = 0; i < ids.length; i++)
        }
   })

    function editParam(rowId) { //第三步：定义编辑操作

        var parameter = {
               oneditfunc : function(rowid) { //在行成功转为编辑模式下触发的事件，参数为此行数据id
                //alert("edited" + rowid);
            }}
        jQuery("#list").editRow(rowId);//开启可编辑模式
        //jQuery("#list").editRow(rowId,parameter); //如果需要参数
        jQuery('#list' ).jqGrid('editRow', rowId, true,pickdates);//开启可编辑模式
    }

    //第四步：定义保存操作，通过键值对把编辑的数据传到后台,如下
    //{upperLimit: value1,lowerLimit:value2} 
    function saveParam(rowId) {  
        var parameter = {
            url : "sensor/setParam", //代替jqgrid中的editurl
            mtype : "POST",
            extraparam : { // 额外 提交到后台的数据
                    "param1" : "1",
                    "param2" : "2"
             },
            successfunc : function(XHR) { //在成功请求后触发;事件参数为XHR对象，需要返回true/false;
                alert(XHR.responseText);//接收后台返回的数据
                if (XHR.responseText == "false") {
                    alert("上限值不能小于下限值");
                    return false; //返回false会使用修改前的数据填充,同时关闭编辑模式。
                } else {
                    alert("编辑成功");
                    return true; //返回true会使用修改后的数据填充当前行,同时关闭编辑模式。
                }

              }//end successfunc
         }//end paramenter
        jQuery('#list').saveRow(rowId, parameter);
    }

   //第五步：定义取消操作
   function cancelParam(rowId) {

        jQuery('#list').restoreRow(rowId); //用修改前的数据填充当前行
    }
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

控制器Java代码

    /** 设置传感器的参数 
    主要看控制器方法怎么接受参数，怎么返回值 **/
    @RequiresPermissions("sensor:create")
    @ResponseBody
    @RequestMapping(value = "sensor/setParam", method = RequestMethod.POST)
    public boolean setParam(Model model, long id, Float upperLimit, Float lowerLimit,String param1,String param2) {
        if (upperLimit > lowerLimit) {// 存入数据库,，返回ture
            Sensor sensor = sensorService.findOne(id);
            sensor.setUpperLimit(upperLimit);
            sensor.setLowerLimit(lowerLimit);
            sensorService.save(sensor);
            return true;
        } else { // 返回false
            return false;
        }

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

参数详解
(1)url: 如果定义了改值，将会覆盖jqGrid中的editurl
如果url=”clientArray” 那么就不会向server端触发请求
(2)extraparam:请求参数列表
(3)successfunc :在请求成功调用后立即返回，该函数签名包括server返回的数据。同时该函数需要返回tue/false

如果编辑行的时候，给某个单元格绑定时间控件

    function editParam(rowId) { //第三步：定义编辑操作
    //开启可编辑模式，并且把参数rowId传给函数pickdates()
        jQuery('#list' ).jqGrid('editRow', rowId, true,pickdates);
    }

    function pickdates(id) {
         //***jqgrid中单元格的id是 行号_列名***
        //给id为list的表格 的第id行的upperLimit列 添加click事件,绑定时间控件
        jQuery("#" + id + "_upperLimit", "#list" ).bind("click",
                function() {
                    WdatePicker({
                        dateFmt : 'HH:mm'
                    })
                });
        //给id为list的表格 的第id行的upperLimit列 添加click事件,绑定时间控件
        jQuery("#" + id + "_lowerLimit", "#list").bind("click",
                function() {
                    WdatePicker({
                        dateFmt : 'HH:mm'
                    })
                })

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

顶

0

踩

0

 

 

• 上一篇jqgrid常用功能 详解
• 下一篇jqGrid基本实现

  相关文章推荐

• · jqGrid增删改查显示——修改+nodejs后台
• · 【直播】计算机视觉原理及实战—屈教授
• · jqGrid单元格编辑配置，事件及方法
• · 【套餐】深度学习入门视频课程—唐宇迪
• · jqgrid点空余地方保存编辑
• · 【套餐】Hadoop生态系统零基础入门--侯勇蛟
• · jqGrid行编辑配置
• · 【套餐】嵌入式Linux C编程基础--朱有鹏

• · jqgrid实现行编辑功能
• · 【套餐】2017软考系统集成项目——任铄
• · jqgrid行编辑
• · 【套餐】Android 5.x顶级视频课程——李宁
• · jqGrid行编辑DEMO
• · jqGrid 新增行 保存新增的行到数据库
• · jqgrid 行内编辑操作
• · Fedora 25 - Linux下Qt5.9的安装和配置

查看评论