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="#" onclick="saverow(this)" iconCls="icon-save">保存</a> ';
var c = '<a href="#" onclick="cancelrow(this)" iconCls="icon-cancel">取消</a>';
return s + c;
} else {
var e = '<a href="#" onclick="editrow(this)" iconCls="icon-edit">修改</a> ';
var d = '<a href="#" onclick="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>