Jqgrid插件实现单元格编辑，以及弹出选择数据后赋值。
来源：互联网 发布：深圳证券交易所软件 编辑：程序博客网 时间：2024/06/10 07:07
这段时间因为做了个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); } }上面的代码实现的功能就是 定义了一个自定义的单元格编辑，点击后弹出数据选择对话框，然后选择一条数据，将数据写入当前行。
具体效果看图片：
1 0
- Jqgrid插件实现单元格编辑，以及弹出选择数据后赋值。
- JqGrid之单元格编辑后保存-yellowcong
- javascript表格jqGrid下拉ComboBox，jqGrid弹出窗jquery.dialog，jqGrid回车换行编辑切换单元格，jqGrid提交全部表格数据ajax
- 实现jqGrid单元格编辑完后点击提交按钮一次性提交
- jqGrid单元格编辑后切换焦点直接提交
- jqgrid设置单元格可编辑
- jqgrid编辑以及自定义
- jqGrid显示数据,属性,多重表头,子表,行编辑,单元格编辑等 基本
- Jquery实现的弹出窗口，选择框内内容后赋值给文本框
- Jquery实现弹出选择框选择数据后返回,数据实现分页
- jqGrid单元格编辑配置，事件及方法
- jqGrid单元格编辑配置，事件及方法
- jqgrid 动态设置单元格不可编辑
- JqGrid之指定单元格可编辑-yellowcong
- jqGrid使某一个单元格去掉编辑状态
- jqGrid单元格/行编辑模式下getRowData如何获取数据行
- jqGrid单元格/行编辑模式下getRowData如何获取数据行
- 获取jqGrid中选择的行的数据以及 jqGrid获得所有行数据的方法
- python——文件、os模块、异常，连接mysql
- 高并发的解决方案
- bzoj3894: 文理分科
- 从模块化到组件化再到插件化
- Reinforcement Learning
- Jqgrid插件实现单元格编辑，以及弹出选择数据后赋值。
- 51nod 1082 与7无关的数【打表】
- [雅礼4-8]老魔杖 SG函数
- MIGO入库时【不可能为条目A999 GBB CN01 BSA 7920确立帐户】解决方案
- 浅入浅出TensorFlow 3
- sip状态响应码
- 【雅礼集训2017】Day2 棋盘游戏
- 动态规划练习一 26题
- 蓝桥杯 算法训练 ALGO-156 表达式计算
