Jqgrid插件实现单元格编辑，以及弹出选择数据后赋值。

最新推荐文章于 2022-12-06 23:14:06 发布
最新推荐文章于 2022-12-06 23:14:06 发布
阅读量1w 收藏 14
点赞数 6
分类专栏： 前端插件 jqgrid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xueyizhixia77/article/details/70216669
版权

这段时间因为做了个erp系统，要求能实现表格内编辑数据保存，于是采用了文档非常坑的jqgrid。
不多废话，跳过前戏。
过程中遇到如下几个坑：
1、保存的时候最后编辑的行数据无法保存；
2、自定义单元格中弹出一个选择框的数据后，用setRowData赋值误区。

好了，我先贴代码 然后再说话。

var g_jqgrid;
    var g_lastrow;
    var g_lastcol;

    $(function () {
        initJqTable();
    });


    function myelem(value, options) {
        var rowid = options.rowId;
        var html = '<div><input type="text"/>';
        html += '<i class="icon-points" onclick=\'chooseProduct("' + rowid + '","' + options.id + '")\'></i></div>';
        var a = $(html);
        if (value) {
            a.find('input').val(value);
        }
        return a.get(0);
    }

    function myvalue(elem, operation, value) {
        if (operation === 'get') {
            return $(elem).find('input').val() || '';
        } else if (operation === 'set') {
            $('input', elem).val(value);
        }
    }

    function chooseProduct(rowid, elemId) {
        var url = '{wb:U("xxxx")}';

        G_openDialog({
            url: url,
            title: '物料选择',
            width: '90%',
            height: '60%',
            btns: ['确定', '取消'],
            btnfunc: [doCheck]
        });

        function doCheck(index, layero) {
            var iframeWin = G_getChildIframeByDom(layero);
            var data = iframeWin.getRowData();
            var newData = new Object();
            newData.product_id = data.id;
            newData.uom_id = data.uoms;
            newData.uom_name = data.uoms_name;
            newData.model = data.model_code;
            $('#' + elemId).find('input').val(data.name);
            g_jqgrid.jqGrid("setRowData", rowid, newData);
            G_closeDialog(index);
        }
    }


    function initJqTable() {
        g_jqgrid = $("#table").jqGrid({
            url: '{wb:U("xxx")}',
            datatype: "json",
            mtype: 'POST',
            cellEdit: true,
            cellsubmit: 'clientArray',
            rowNum: 0,
            postData: {
                id: id
            },
            colNames: ['操作', 'ID', 'product_id', 'uom_id', '计划单号', '产品名称', '规格型号或图号', '数量', '单位', '下单时间', '要求交货时间', '来源', '来源单号'],
            colModel: [
                {
                    name: 'cz', index: 'cz', align: 'center',
                    formatter: function (cellvalue, options, rowObject) {
                        var str = '';
                        var rowId = options.rowId;
                        if(ac == 'add'){
                            str += '<button title="新增" type="button" class="wb-btn-add" onclick="addRow()"/>';
                            str += '<button title="删除" type="button" class="wb-btn-del" onclick=\'delRow("' + rowId + '")\'/>';
                        }
                        return str;
                    }
                },
                {name: 'id', index: 'id', hidden: true},
                {name: 'product_id', index: 'product_id', hidden: true},
                {name: 'uom_id', index: 'uom_id', hidden: true},
                {name: 'codes', index: 'codes'},
                {
                    name: 'names', index: 'names', classes: 'cus-edit-td',
                    editable: true,
                    edittype: 'custom',
                    editoptions: {
                        custom_element: myelem,
                        custom_value: myvalue
                    }
                },
                {name: 'model', index: 'model'},
                {name: 'qty', index: 'qty', editable: true, classes: 'cus-edit-td',},
                {name: 'uom_name', index: 'uom_name'},
                {
                    name: 'create_time', index: 'create_time',
                    formatter: function (cellvalue, options, rowObject) {
                        return moment().format('YYYY-MM-DD HH:mm:ss');
                    }
                },
                {
                    name: 'require_time', index: 'require_time', editable: true, classes: 'cus-edit-td',
                    editoptions: {
                        dataInit: function (e) {
                            initDate(e);
                        }
                    }
                },
                {
                    name: 'source', index: 'source',
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == '0') {
                            return '';
                        }else{
                            // 待處理
                            return '';
                        }
                    }
                },
                {name: 'source_codes', index: 'source_codes'},
            ],
            jsonReader: {
                repeatitems: false
            },
            loadComplete: function () {
                var datas = g_jqgrid.jqGrid('getDataIDs');
                if (datas && datas.length == 0) {
                    g_jqgrid.jqGrid('addRowData', getRandomGridId(), {});
                }
            },
            beforeEditCell: function (rowid, cellname, v, iRow, iCol) {
                g_lastrow = iRow;
                g_lastcol = iCol;
            },
        });
    }
    function addRow() {
        g_jqgrid.jqGrid('addRowData', getRandomGridId(), {});
    }

    function delRow(jqid) {
        // 判断当前是否是最后一条记录
        var datas = g_jqgrid.jqGrid('getDataIDs');
        if (datas && datas.length > 1) {
            g_jqgrid.delRowData(jqid);
        } else {
            G_alertDialog('至少保留一条');
        }
    }

    /**
     * @Author CR
     * @date 2017/4/17
     * 保存
     */
    function save() {
        // 获取表格所有数据
        g_jqgrid.jqGrid("saveCell", g_lastrow, g_lastcol);
        var objDatas = g_jqgrid.jqGrid('getRowData');
        var lindex = G_loadDialog();
        var d = JSON.stringify(objDatas);
        d = $.jgrid.htmlEncode(d);
        $.ajax({
            type: "POST",
            data: {
                ac:ac,
                datas: d
            },
            url: '{wb:U("save")}',
            error: function () {
                G_closeDialog(lindex);
            },
            success: function (data) {
                G_closeDialog(lindex);
                if(data.rtnResult == 'success'){
                    G_msgDialog('保存成功',function () {
                        location.href = '{wb:U("index")}';
                    })
                }

            }
        });
    }

首先，

 var datas = g_jqgrid.jqGrid('getDataIDs');
                if (datas && datas.length == 0) {
                    g_jqgrid.jqGrid('addRowData', getRandomGridId(), {});
                }

上面这段代码是为了在进入新增页面的时候自动新增出一行。
getRandomGridId()是我自定义的一个生成随机id的方法。

beforeEditCell: function (rowid, cellname, v, iRow, iCol) {
                g_lastrow = iRow;
                g_lastcol = iCol;
            },

上面这段代码是为了解决在点保存的时候，最后编辑行的数据无法获取到的问
题。

{
                    name: 'require_time', index: 'require_time', editable: true, classes: 'cus-edit-td',
                    editoptions: {
                        dataInit: function (e) {
                            initDate(e);
                        }
                    }
                },

上面这部分代码是将我用的datepicker嵌入到单元格编辑中，initDate为自定义初始化日期插件的方法。

{
                    name: 'names', index: 'names', classes: 'cus-edit-td',
                    editable: true,
                    edittype: 'custom',
                    editoptions: {
                        custom_element: myelem,
                        custom_value: myvalue
                    }
                },

上面的代码就是绑定单元格自定义控件了。

自定义的控件代码如下：

function myelem(value, options) {
        var rowid = options.rowId;
        var html = '<div><input type="text"/>';
        html += '<i class="icon-points" onclick=\'chooseProduct("' + rowid + '","' + options.id + '")\'></i></div>';
        var a = $(html);
        if (value) {
            a.find('input').val(value);
        }
        return a.get(0);
    }

    function myvalue(elem, operation, value) {
        if (operation === 'get') {
            return $(elem).find('input').val() || '';
        } else if (operation === 'set') {
            $('input', elem).val(value);
        }
    }

    function chooseProduct(rowid, elemId) {
        var url = '{wb:U("xxxxxxx")}';

        G_openDialog({
            url: url,
            title: '物料选择',
            width: '90%',
            height: '60%',
            btns: ['确定', '取消'],
            btnfunc: [doCheck]
        });

        function doCheck(index, layero) {
            var iframeWin = G_getChildIframeByDom(layero);
            var data = iframeWin.getRowData();
            var newData = new Object();
            newData.product_id = data.id;
            newData.uom_id = data.uoms;
            newData.uom_name = data.uoms_name;
            newData.model = data.model_code;
            $('#' + elemId).find('input').val(data.name);
            g_jqgrid.jqGrid("setRowData", rowid, newData);
            G_closeDialog(index);
        }
    }

上面的代码实现的功能就是 定义了一个自定义的单元格编辑，点击后弹出数据选择对话框，然后选择一条数据，将数据写入当前行。
具体效果看图片：
做出来的效果图

好多人找我要完整的源码，我把整个html的内容再贴一份应该就可以了吧？

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <include file="./Template/Common/baseInclude.html"/>
</head>
<body>

<div class="box">
    <div class="top-box">
        <nav class="top-nav">
            <button onclick="{history.go(-1)}"><span class="icon icon-switch"></span>返回</button>
            <button onclick="save()"><span class="icon icon-keep"></span>暂存</button>
            <button onclick="submit()"><span class="icon icon-submit"></span>提交</button>
        </nav>
    </div>
    <br/>
    <div class="row">
        <div class="col-sm-12">
            <table id="table"></table>
        </div>
    </div>
</div>
<script>
    var id = '{wb:$id}' || '';
    var g_jqgrid;
    var g_lastrow;
    var g_lastcol;

    $(function () {
        initJqTable();
    });
    function myelem(value, options) {
        var rowid = options.rowId;
        var html = '<div class="grid_cus_div"><input type="text" readonly/>';
        html += '<i class="wb-icons-points" οnclick=\'chooseSupplier("' + rowid + '","' + options.id + '")\'></i></div>';
        var a = $(html);
        if (value) {
            a.find('input').val(value);
        }
        return a.get(0);
    }

    function myvalue(elem, operation, value) {
        if (operation === 'get') {
            return $(elem).find('input').val() || '';
        } else if (operation === 'set') {
            $('input', elem).val(value);
        }
    }


    function initJqTable() {
        g_jqgrid = $("#table").jqGrid({
            url: '{wb:U("formList")}',
            datatype: "json",
            mtype: 'POST',
            cellEdit: true,
            cellsubmit: 'clientArray',
            rowNum: 0,
            postData: {
                id: id
            },
            colNames: ['操作','account_man_id','account_man_codes', 'ID',  '单据号', '单据名称', '往来单位', '期初金额'],
            colModel: [
                {
                    name: 'cz', index: 'cz', align: 'center',width:80,
                    formatter: function (cellvalue, options, rowObject) {
                        var str = '';
                        var rowId = options.rowId;
                        str += '<button title="新增" type="button" class="wb-btn-add" οnclick="addRow()"/>';
                        str += '<button title="删除" type="button" class="wb-btn-del" οnclick=\'delRow("' + rowId + '")\'/>';
                        return str;
                    }
                },
                {name: 'account_man_id', index: 'account_man_id', hidden: true},
                {name: 'account_man_codes', index: 'account_man_codes', hidden: true},
                {name: 'id', index: 'id', hidden: true},
                {name: 'codes', index: 'codes'},
                {name: 'names', index: 'names',classes: 'cus-edit-td',editable: true},
                {
                    name: 'account_man_names', index: 'account_man_names',width:150, classes: 'cus-edit-td',
                    editable: true,
                    edittype: 'custom',
                    editoptions: {
                        custom_element: myelem,
                        custom_value: myvalue
                    }
                },
                {name: 'price', index: 'price',classes: 'cus-edit-td',editable: true},
            ],
            jsonReader: {
                repeatitems: false
            },
            loadComplete: function () {
                var datas = g_jqgrid.jqGrid('getDataIDs');
                if (datas && datas.length == 0) {
                    addRow();
                }
            },
            beforeEditCell: function (rowid, cellname, v, iRow, iCol) {
                g_lastrow = iRow;
                g_lastcol = iCol;
            },
        });
    }
    function addRow(data) {
        if(!data){
            data = {};
        }
        g_jqgrid.jqGrid('addRowData', getRandomGridId(), data);
    }

    function delRow(jqid) {
        // 判断当前是否是最后一条记录
        var datas = g_jqgrid.jqGrid('getDataIDs');
        if (datas && datas.length > 1) {
            g_jqgrid.delRowData(jqid);
        } else {
            G_alertDialog('至少保留一条');
        }
    }


    /**
    * @Author CR
    * @date 2017/6/15
    * 保存
    */
    function save() {
        // 获取表格所有数据
        g_jqgrid.jqGrid("saveCell", g_lastrow, g_lastcol);
        var objDatas = g_jqgrid.jqGrid('getRowData');
        var nobjDatas = [];
        $.each(objDatas, function (i, item) {
            delete item.cz;
            nobjDatas.push(item);
        });
        var lindex = G_loadDialog();
        var d = JSON.stringify(nobjDatas);
        $.ajax({
            type: "POST",
            data: {
                datas: d
            },
            url: '{wb:U("save")}',
            error: function () {
                G_closeDialog(lindex);
            },
            success: function (data) {
                G_closeDialog(lindex);
                if(data.rtnResult == 'success'){
                    G_msgDialog('保存成功',function () {
                        location.href = '{wb:U("index")}';
                    })
                }

            }
        });
    }

    function submit() {
        if (!id) {
            G_msgDialog('请先保存数据');
            return;
        }
        G_confirmDialog('提交后不可更改,是否确认?', function () {
            $.ajax({
                type: "POST",
                data: {
                    id: id
                },
                url: '{wb:U("doSubmit")}',
                error: function () {
                },
                success: function (data) {
                    if (data.rtnResult == 'success') {
                        G_msgDialog('提交成功,页面跳转中...', function () {
                            location.href = '{wb:U("index")}';
                        })
                    }
                }
            });
        });

    }

    function chooseSupplier(rowid, elemId) {
        G_openDialog({
            url: '{wb:U("Home/CommonLayout/supplier")}',
            title: '供应商选择',
            width: '90%',
            height: '60%',
            btns: ['确定', '取消'],
            btnfunc: [doCheck]
        });

        function doCheck(index, layero) {
            var iframeWin = G_getChildIframeByDom(layero);
            var data = iframeWin.getRowData();
            var newData = new Object();
            newData.account_man_id = data.id;
            newData.account_man_codes = data.codes;
            $('#' + elemId).find('input').val(data.names);
            g_jqgrid.jqGrid("setRowData", rowid, newData);
            G_closeDialog(index);
        }
    }

</script>
</body>
</html>
RuiAking
关注
  • 6
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
专栏目录
jqgrid动态设置某个单元格进入编辑状态/不可编辑
qq_33871182的博客
10-25 4734
行编辑时特定单元格编辑 设置列qtype的editable属性值为true，表示此字段可编辑；然后设置id对应的行进入编辑状态，此时该行中所有的可编辑列都将进入编辑状态。 $("#jqgridTable").setColProp("qtype",{editable:true}); $("#jqgridTable").editRow(id,true); 行编辑时特定单元格不可编辑 $("#jqgr...
jQuery实现表格增删改（弹窗形式）
低调哥的博客
02-11 4286
1.html&lt;div class="box set-metadata-management"&gt; &lt;div class="set-content"&gt; &lt;a href="javascript:void(0);" class="save-btn"&gt;新增&lt;/a&gt; &lt;table cel
沫沫金::jqGrid插件-弹窗返回值
weixin_34309543的博客
01-04 119
应用场景 Web应用中需要弹出任意页面，将操作后的数据在不经过后台直接反馈到父页面。和ajax的区别：1、避免编写大量的后台方法 2、可以弹出普通的页面，支持页面的所有操作 简介 基于jqGrid实现的弹窗返回值插件，全面兼容支持window.returnValue的浏览器；封装 完善，可自由扩展，使用方便灵活；为解决web应用高内聚低耦合提供完整的支持 ...
jqGrid 列表数据赋值
qq_39822451的博客
08-22 1995
//方式一：列表数据赋值完后 每一行设置为可编辑状态 $("#yourGrid").jqGrid("clearGridData"); for (var i = 0; i < data.length; i++) { $("#yourGrid").jqGrid("addRowData", i, { 'bean.id': data[i].id, 'bean.be...
jqGrid formatter属性详解
旭东怪的博客
01-05 3960
1 formatter属性 formatter属性支持自定义单元格内容。 语法： formatter:function(cellvalue,options,rowObject){ return ""; } 参数详解： （1）cellvalue，当前单元格的值 （2）options，该cell的options设置，包括{rowId, colModel,pos,gid} （3）rowObject，当前cell所在row的值，是一个对象 2 cellvalue 给当前值以%结尾。 fo
Bootstrap-jqgrid学习（十六）
dengfengling999的博客
12-06 811
表格属性 分页属性：显示总条数 每页显示多少条：定义下拉列表，展示每页显示条数： 列排序：给表格定义标题： 定义是否隐藏表格的下拉按钮： 自适应父容器： 指定表格的高度：设置页面初始的页码： 指定分页栏的位置：是否显示翻页按钮： 是否展示跳转页面输入框： listpage.json：
HTML checkbox 的使用（取值、赋值、判断是否选中）【记录】
热门推荐
单枪匹码
01-03 5万+
这里只说一些经常用到的元素属性和checkbox相关的方法。 1、首先是HTML：（checkbox的声明） <input type="" name="" value="" disabled="none" checked="checked" /> 声明一个checkbox主要是用到上面几个属性： type：代表input的类型，值为checkbox则代表是多选框。 name：设置返...
通过点击jqgrid表格弹出需要的表格数据
11-23
首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。 特点如下: 完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。 自定义的工具列 预设...
jqgrid合并单元格，合并行、合并列
01-08
jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-...
获取jqGrid中选择的行的数据
01-19
下面可以获取选择一行的id，如果你选择多行，那下面的id是最后选择的行的id： var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id，那这些id便封装成一个id数组，那可以使用以下...
JQGrid的用法解析(列编辑,添加行,删除行)
09-04
本文是对JQGrid的用法--列编辑,添加行,删除行。进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
利用jqgrid实现上移下移单元格功能
10-17
在本文中，我们将深入探讨如何使用jqGrid，一个基于jQuery的表格插件，来实现单元格的上移和下移功能。jqGrid提供了一种高效且灵活的方式来展示和操作表格数据，包括与服务器端的数据交互。当我们需要调整表格中数据...
jqgrid 表格的增删改查以及modal弹出框
03-07
jqgrid 表格的增删改查4种操作，以及表格分页，还有修改以及添加时候的modal弹出框。代码是个project项目文件，需要自己建个解决方案将项目包含进去。
jqGrid表单编辑配置参数
菜鸟史
03-10 1万+
jqGrid表单编辑 jqGrid支持一个浮动的表单用于查看，添加，编辑，删除和查询表格数据，下面为添加记录的效果图 　　在你的项目中可以使用模态盒子和行编辑。其中，行编辑只能用于编辑已经存在的行，不能用于查询，删除，添加数据。实际应用中，不推荐同时使用这2中方法，因为选择同一行时这2者存在冲突（在这种情况下，当你选择一行来编辑，点击编辑模态盒子，你将得到模态盒子中的单元格ID，而不是
jqgrid实现多行数据弹出框添加修改查询操作
qililong88的博客
08-05 5188
此页面可以实现在单行末尾进行添加图片操作，也可以实现选中多行然后一起添加修改图片操作。前台页面和后台代码及注解如下所示：groupImage包：materialNextDef.jsp： 药品图片添加 //要弹出添加框，此处先定义为隐藏
jqGrid自定义复选框或下拉列表后的选中事件
笑到世界都狼狈的博客
04-04 1751
首先纪念一下，今天2020年4月4日，一个特殊的日子，全国都在降半旗，上午十点钟所有的车都停止鸣笛三分钟，警报响起，缅怀因新冠病毒而牺牲的医护人员以及因新冠而失去生命的普通百姓。今天本来是清明假期，但是早上睡不着觉，索性来公司加班，完成这个昨天没有搞定的jqGrid自定义复选框的问题。 首先一张图描述一下我想要的效果： 接下来看看代码是怎么实现的： 差不多实现就是这样实现的，接...
jqGrid options
07-16 183
jqGrid参数 名称 类型 描述 默认值 可修改 url string 获取数据的地址 datatype string 从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonp，script，x...
JqGrid学习总结_2 动态改变列编辑属性
luguling200802544的专栏
06-10 2882
JqGrid 的列属性见链接：http://www.qinbin.me/jquery-colmodel-property-description editType是列的编辑属性，可为text、textarea，select、checkbox、password、button、image、file等。      更详细的编辑属性见：http://www.trirand.com/jqgridwiki/
ipywidgets-7.0.0a10.tar.gz
最新发布
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
jqgrid设置单元格回车后不跳转下一个编辑框
06-07
您可以通过以下步骤设置 jqGrid 单元格回车后不跳转到下一个编辑框： 1.在 colModel 中设置 editoptions 属性： ```javascript colModel: [ { name: 'name', index: 'name', editable: true, editoptions: { dataInit: function (elem) { $(elem).on('keydown', function (e) { if (e.keyCode === 13) { e.stopPropagation(); } }); } } } ] ``` 2.通过 dataInit 属性在单元格编辑器中绑定 keydown 事件，并在事件中阻止默认行为（跳转到下一个编辑框）： ```javascript dataInit: function (elem) { $(elem).on('keydown', function (e) { if (e.keyCode === 13) { e.stopPropagation(); } }); } ``` 这样就可以实现单元格回车后不跳转到下一个编辑框了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值