Jqgrid外掛實現單元格編輯，以及彈出選擇資料後賦值。
阿新 • • 發佈：2019-02-02
這段時間因為做了個erp系統，要求能實現表格內編輯資料儲存，於是採用了文件非常坑的jqgrid。
不多廢話，跳過前戲。
過程中遇到如下幾個坑：
1、儲存的時候最後編輯的行資料無法儲存；
2、自定義單元格中彈出一個選擇框的資料後，用setRowData賦值誤區。
好了，我先貼程式碼 然後再說話。
var g_jqgrid;
var g_lastrow;
var g_lastcol;
$(function () {
initJqTable();
});
function myelem(value, options) {
var 首先，
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);
}
}上面的程式碼實現的功能就是 定義了一個自定義的單元格編輯，點選後彈出資料選擇對話方塊，然後選擇一條資料，將資料寫入當前行。
具體效果看圖片：
