easyui datagrid行编辑中数据联动

easyui的datagrid中行内编辑使用数据联动。即：当编辑产品编号时，该行的产品名称自动根据产品编号显示出来。

在编辑中获取当前行的索引

function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}

在编辑中获取当前行的值

var editor = $('#tt').datagrid('getEditors', rowIndex);
return $(editor[0].target).numberbox('getValue');

 

jQuery EasyUI 1.4.1.x

<link href="~/Content/bootstrap.css?v=2" rel="stylesheet" />
<link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/themes/icon.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.2.1.min.js?v=2"></script>
<script src="~/Scripts/jquery.easyui.min.js?v=2"></script>
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<script src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<div style="padding-top:20px;width:860px; margin:auto;">
<div class="row">
<div style="margin:10px 0">
<a href="#" onclick="insert()"
class="easyui-linkbutton c1" iconCls="icon-add">添加</a>
</div>
<table id="tt"></table>
</div>
</div>

 

 

<script type="text/javascript">
var jsondata = @Html.Raw(ViewBag.jsondata);
var pc = @Html.Raw(ViewBag.pc);
$(function () {
$('#tt').datagrid({
title: '仓库账务库存',
iconCls: 'icon-edit',
width: 800,
height: 300,
singleSelect: true,
columns: [[
{
field: 'productid', title: '产品编码', width: 80, align: 'right'
, editor: {
type: 'numberbox',
options: {
required: true,
onChange: function () {//输入产品编码，产品名称和批次联动
changeproduct(this);
}
}
}
},
{
field: 'productname', title: '产品名称', width: 200
, editor: {
type: 'text'//产品名称这里先设置为text，然后再设置为只读。如果没有type就获取不到，无法js更新值

}
},
{
field: 'pc', title: '批次', width: 150, align: 'left'
, editor: {
type: 'combobox'
, options: {
valueField: 'label',
textField: 'value',
data: pc,
onChange: function () {//combobox下拉框选择更改，数量联动

changepc(this);
}
}
}
},
{ field: 'ztsl', title: '整托数量', width: 80, align: 'right', editor: 'text' },
{ field: 'zjsl', title: '整件数量', width: 80, align: 'right',editor: 'text' },
{ field: 'hwh', title: '货位号', width: 80,align: 'right', editor: 'text' },
{
field: 'action', title: '', width: 80, align: 'center',
formatter: function (value, row, index) {
if (row.editing) {
var s = '<a href="#"
οnclick="saverow(this)"
iconCls="icon-save">保存</a>&nbsp;';
var c = '<a href="#"
οnclick="cancelrow(this)"
iconCls="icon-cancel">取消</a>';
return s + c;
} else {
var e = '<a href="#"
οnclick="editrow(this)" iconCls="icon-edit">修改</a>&nbsp;';
var d = '<a href="#"
οnclick="deleterow(this)" iconCls="icon-remove">删除</a>';
return e + d;
}
}
}
]],
onBeforeEdit: function (index, row) {
row.editing = true;
updateActions(index);
},
onAfterEdit: function (index, row) {
row.editing = false;
updateActions(index);
},
onCancelEdit: function (index, row) {
row.editing = false;
updateActions(index);
}
});
});
function updateActions(index) {
$('#tt').datagrid('updateRow', {
index: index,
row: {}
});
}
//获取当前行的索引
function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
//批次combobox下拉框选择更改，数量联动
function changepc(r){
var rowindex = getRowIndex(r);
var editor = $('#tt').datagrid('getEditors', rowindex);
var productid=$(editor[0].target).numberbox('getValue');
var pctemp=$(editor[2].target).numberbox('getValue');
for(var i=0;i<jsondata.length;i++){
if(jsondata[i].productid == productid && jsondata[i].pc == pctemp){
$(editor[3].target).val(jsondata[i].ztsl);
$(editor[4].target).val(jsondata[i].zjsl);
$(editor[5].target).val(jsondata[i].hwh);
}
}
}
//产品编码textbox更改，批次下拉框联动
function changeproduct(r){
var rowindex = getRowIndex(r);
var editor = $('#tt').datagrid('getEditors', rowindex);
var productid=$(editor[0].target).numberbox('getValue');
var temppc = new Array();
var rownum = (rowindex + 1).toString();
for(var i=0;i<jsondata.length;i++){
if(jsondata[i].productid == productid){
var tpc = { "label":jsondata[i].pc,"value":jsondata[i].pc };
temppc.push(tpc);
$(editor[1].target).val(jsondata[i].productname);
}
}
$(editor[2].target).combobox({ data : temppc});
}
//编辑
function editrow(target) {
var rowIndex = getRowIndex(target);
$('#tt').datagrid('beginEdit', getRowIndex(target));
initrow(rowIndex);
}
//删除一行
function deleterow(target) {
$('#tt').datagrid('deleteRow', getRowIndex(target));
}
//保存编辑
function saverow(target) {
$('#tt').datagrid('endEdit', getRowIndex(target));
}
//取消编辑
function cancelrow(target) {
$('#tt').datagrid('cancelEdit', getRowIndex(target));
}
//新增一行
function insert() {
var rowcount = $('#tt').datagrid('getRows').length;
$('#tt').datagrid('insertRow', {
index: rowcount,
row: {
}
});
$('#tt').datagrid('selectRow', rowcount);
$('#tt').datagrid('beginEdit', rowcount);
initrow(rowcount);
}
//新增或编辑行时，先初始化行内的编辑器
function initrow(rowIndex) {
var editor = $('#tt').datagrid('getEditors', rowIndex);
var productid = editor[0];
$(productid.target).focus();
//设置产品名称、数量等只读
$(editor[1].target).attr("disabled", true);
$(editor[3].target).attr("disabled", true);
$(editor[4].target).attr("disabled", true);
$(editor[5].target).attr("disabled", true);
$(editor[0].target).css("text-align", "right");
$(editor[3].target).css("text-align", "right");
$(editor[4].target).css("text-align", "right");
$(editor[5].target).css("text-align", "right");
}
</script>