这段时间因为做了个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>