easyui datagrid 在线行编辑

@{
    ViewBag.Title = "Index";
}
<link href="@Url.Content("~/Content/themes/default/easyui.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/icon.css")" rel="stylesheet" />
<script src="@Url.Content("~/Content/jquery.min.js")"></script>
<script src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>




<div id="dg"></div>




<div id="tb" style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" οnclick="refresh()">刷新</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" οnclick="append()">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" οnclick="removeit()">删除</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" οnclick="accept()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" οnclick="getChanges()">改动的项</a>
</div>


<script>
    function setInutpValue(ele)
    {
        
        $(ele).prev().val("aaaaaaaaa");
        alert("设置旁边input的值为aaaaaaaaa");
    }
    $(function () {
        $.extend($.fn.datagrid.defaults.editors, {
            textBtn: {
                init: function (container, options) {
                    var input = $('<input type="text" class="datagrid-editable-input"/><button οnclick="setInutpValue(this);">给当前单元格</button>').appendTo(container);
                    return input;
                },
                destroy: function (target) {
                    $(target).remove();
                },
                getValue: function (target) {
                    return $(target).val();
                },
                setValue: function (target, value) {
                    $(target).val(value);
                },
                resize: function (target, width) {
                    $(target)._outerWidth(width);
                }
            }
        });
        $.extend($.fn.datagrid.defaults.editors, {
            textOther: {
                init: function (container, options) {
                    var input = $('<button οnclick="setOtherValue(this);">给其他列赋值</button>').appendTo(container);
                    return input;
                },
                destroy: function (target) {
                    $(target).remove();
                },
                getValue: function (target) {
                    return $(target).val();
                },
                setValue: function (target, value) {
                    $(target).val(value);
                },
                resize: function (target, width) {
                    $(target)._outerWidth(width);
                }
            }
        });


        $('#dg').datagrid({
            url: '/Home/GetAll',
            singleSelect: true,
            toolbar: '#tb',
            onClickCell: onClickCell,
            columns: [[
                {
                    field: 'code', title: '模糊下拉Code', editor: {
                        type: 'combobox',
                        options: {
                            valueField: 'code',
                            textField: 'code',
                            method: 'get',
                            mode: "remote",
                            url: '/Home/GetCode',
                            required: true,
                            onSelect: function (data) {
                                debugger;
                                var row = $('#dg').datagrid('getSelected');
                                var rowIndex = $('#dg').datagrid('getRowIndex', row);//获取行号  
                                var thisTarget = $('#dg').datagrid('getEditor', { 'index': rowIndex, 'field': 'code' }).target;
                                var value = thisTarget.combobox('getValue');


                                var target = $('#dg').datagrid('getEditor', { 'index': rowIndex, 'field': 'name' }).target;
                                target.combobox('clear'); //清除原来的数据  
                                var url = '/Home/GetName?id=' + value;
                                target.combobox('reload', url);//联动下拉列表重载  
                            }
                        }
                    }
                },
                {
                    field: 'name', title: '模糊下拉Name', editor: {
                        type: 'combobox',
                        options: {
                            valueField: 'name',
                            textField: 'name',
                            method: 'get',
                            mode: "remote",
                            url: '',
                            required: true
                        }
                    }
                },
                { field: 'title', title: '文本框title', editor: 'textbox' },
                { field: 'ctitle', title: '带选择文本框choice', editor: 'textBtn' },
                { field: 'count', title: '数字title', editor: 'numberbox' },
                { field: 'price', title: '带小数点的数字price', editor: { type: 'numberbox', options: { precision: 1 } } },
                { field: 'btn', title: '部分选择btn', editor: 'textOther' }
            ]]
        });
    });


    var editIndex = undefined;
    var deleteRow = [];
    function endEditing() {
        if (editIndex == undefined) { return true }
        if ($('#dg').datagrid('validateRow', editIndex)) {
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickCell(index, field) {
        if (editIndex != index) {
            if (endEditing()) {
                $('#dg').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
                if (ed) {
                    ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                }
                editIndex = index;
            } else {
                setTimeout(function () {
                    $('#dg').datagrid('selectRow', editIndex);
                }, 1);
            }
        }
    }
    function getChanges() {
        var rows = $('#dg').datagrid('getChanges');
        alert(rows.length + ' rows are changed!');
    }
    function isDelete(row) {
        var flag = false;
        for (var i = 0; i < deleteRow.length; i++) {
            if (deleteRow[i].id.toUpperCase() == row.id.toUpperCase()) {
                flag = true;
                break;
            }
        }
        return flag;
    }
    function accept() {
        debugger;
        if (endEditing()) {
            //获取修改的行
            var rows = $('#dg').datagrid('getChanges');
            for (var i = 0; i < rows.length; i++) {
                if (isDelete(rows[i])) {
                    rows[i].state = "delete";
                    continue;
                }
                if (rows[i].state != "insert") {
                    rows[i].state = "update";
                }
            }
            //之后保存
            //$('#dg').datagrid('acceptChanges');
            $.ajax({
                url: '/Home/Submit',
                data: JSON.stringify(rows),
                contentType: "application/json",
                type: 'post',
                success: function (data) {
                    alert(data);
                }
            });


        }
    }
    function removeit() {
        if (editIndex == undefined) { return }
        debugger;
        var row = getrow(editIndex);
        if (row.state != "insert") {
            deleteRow.push(row);
        }
        $('#dg').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }
    function getrow(index) {
        var rows = $('#dg').datagrid('getRows');//获得所有行
        var row = rows[index];//根据index获得其中一行。
        return row;


    }
    function append() {
        if (endEditing()) {
            $('#dg').datagrid('appendRow', { id: guid(), state: "insert" });
            editIndex = $('#dg').datagrid('getRows').length - 1;
            $('#dg').datagrid('selectRow', editIndex)
                    .datagrid('beginEdit', editIndex);
        }
    }
    function refresh() {
        $('#dg').datagrid('reload');
    }
    function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }
    function guid() {
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }








    //{field:'xxx',title:'xxx',width:150,align:'left',halign:'center',
    //    formatter:function(value,row){
    //        return row.WLMCText;
    //    },
    //    editor: {
    //            type: 'combobox',
    //            options: {
    //                //data:wzflListJson,
    //            valueField:'WLBM',
    //            textField:'WLMC',
    //            editable:true,
    //            required:true,    
    //            filter: function(q, row){  
    //                var opts = $(this).combobox('options');  
    //                return row[opts.textField].indexOf(q) >= 0;//这里改成>=即可在任意地方匹配  
    //            }, 
    //            onSelect: function (data) {
    //                var row = $('#dg').datagrid('getSelected');
    //                var rowIndex = $('#dg').datagrid('getRowIndex', row);//获取行号  
    //                var thisTarget = $('#dg').datagrid('getEditor', { 'index': rowIndex, 'field': 'WLMC' }).target;
    //                var value = thisTarget.combobox('getValue');
    //                var text = thisTarget.combobox('getText');//获取当前选中的文
    //                row.WLMCText= text;




    //            }


</script>