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="#"  onclick="saverow(this)"  iconCls="icon-save">保存</a>&nbsp;';
                                    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>&nbsp;';
                                    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>