JqueryEasyUI datagrid editor

Combobox:

{ field: 'FieldType', title: '@ViewBag.FieldType', width: 40, align: 'center',
                        editor: {//设置其为可编辑
                            type: 'combobox', //设置编辑格式
                            options: {
                                valueField: 'id',
                                textField: 'text',
                                url: '@Url.Content("~/Domain/LoadFieldType")',
                                //data: products,
                                editable: false,
                                required: true//设置编辑规则属性
                            }
                        },
                        formatter: function (data) {
                            var str = "";
                            if (data == '') {
                                return str;
                            }
                            $.ajax({
                                url: '@Url.Content("~/Domain/GetFieldTypeNameById")' + "?fieldId=" + data,
                                type: "POST",
                                async: false,
                                dataType: 'text',
                                success: function (msg) {
                                    str = msg;
                                }
                            });
                            return str;
                        }
                    },

Checkbox:

{ field: 'IsEnable', title: '@ViewBag.FieldEnable', width: 40, align: 'center',
                        //                        formatter: function (data) {
                        //                            switch (data) {

                        //                             }
                        //                        },
                        editor: {//设置其为可编辑
                            type: 'checkbox', //设置编辑格式
                            options: {
                                on: 1,
                                off: 0,
                                required: true//设置编辑规则属性
                            }
                        }
                    },

 

 普通文本框：

editor: 'text'

 例子：

        $(document).ready(
            function () {
                LoadData(); //加载数据
                PagerCheck(); //分页索引不能输入非数字
            }
        );

        var isEdit = false;
        function LoadData() {
            $('#tbList').datagrid({
                url: '@Url.Content("~/Domain/LoadCustomField")' + "?domainId=" + '@(Model.DomainID)',
                width: "auto",
                fitColumns: true,
                striped: true,
                nowrap: false,
                pagination: true,
                pageSize: 20,
                singleSelect: true,
                idField: 'FieldId',
                //            frozenColumns: [[{ field: 'radio', width: 30, formatter: function (value, row, index) {
                //                return '<input type="radio" name="rd_action" />';
                //            }
                //            }]],
                columns: [[
                    { field: 'FieldId', title: '@ViewBag.FieldId', width: 20, hidden: true },
                    { field: 'DomainId', title: '@ViewBag.FieldDomainId', width: 40, align: 'left', hidden: true },
                    { field: 'FieldName', title: '@ViewBag.FieldName', width: 40, align: 'left', editor: 'text' },
                    { field: 'CName', title: '@ViewBag.FieldCName', width: 40, align: 'left', editor: 'text' },
                    { field: 'EName', title: '@ViewBag.FieldEName', width: 40, align: 'left', editor: 'text' },
                    { field: 'FieldType', title: '@ViewBag.FieldType', width: 40, align: 'center',
                        editor: {//设置其为可编辑
                            type: 'combobox', //设置编辑格式
                            options: {
                                valueField: 'id',
                                textField: 'text',
                                url: '@Url.Content("~/Domain/LoadFieldType")',
                                //data: products,
                                editable: false,
                                required: true//设置编辑规则属性
                            }
                        },
                        formatter: function (data) {
                            var str = "";
                            if (data == '') {
                                return str;
                            }
                            $.ajax({
                                url: '@Url.Content("~/Domain/GetFieldTypeNameById")' + "?fieldId=" + data,
                                type: "POST",
                                async: false,
                                dataType: 'text',
                                success: function (msg) {
                                    str = msg;
                                }
                            });
                            return str;
                        }
                    },
                    { field: 'IsEnable', title: '@ViewBag.FieldEnable', width: 40, align: 'center',
                        //                        formatter: function (data) {
                        //                            switch (data) {

                        //                             }
                        //                        },
                        editor: {//设置其为可编辑
                            type: 'checkbox', //设置编辑格式
                            options: {
                                on: 1,
                                off: 0,
                                required: true//设置编辑规则属性
                            }
                        }
                    },
                    { field: 'Remark', title: '@ViewBag.FieldRemark', width: 120, align: 'left', editor: 'text' }
                ]],
                toolbar: [{
                    text: '@ViewBag.CustomFieldAdd',
                    iconCls: 'icon-add',
                    handler: adddata
                },
            {
                text: '@ViewBag.CustomFieldEdit',
                iconCls: 'icon-edit',
                handler: editdata
            },
            {
                text: '@ViewBag.CustomFieldDelete',
                iconCls: 'icon-add',
                handler: deletedata
            },
            {
                text: '@ViewBag.CustomFieldSave',
                iconCls: 'icon-save',
                handler: function () {
                    var rowData = $('#tbList').datagrid('getSelected');
                    var rowIndex = $('#tbList').datagrid('getRowIndex', rowData);
                    $("#tbList").datagrid('endEdit', rowIndex);
                    if (dataValidate(rowData)) {
                        //特殊自定义字段只能新增一次
                        if (rowData.FieldId == undefined && rowData.FieldType != 6) {
                            var url = '@Url.Content("~/Domain/ValidateCreate?domainId=")' + '@(Model.DomainID)' + "&fieldType=" + rowData.FieldType;
                            $.ajax({
                                url: url,
                                type: 'POST',
                                async: false,
                                success: function (msg) {
                                    if (msg == 'True') {
                                        saveEdit(rowIndex, rowData);
                                    }
                                    else {
                                        beginEdit(rowIndex);
                                        alert('@ViewBag.CustomFieldCreateTips');
                                    }
                                }
                            });
                        }
                        else {
                            saveEdit(rowIndex, rowData);
                        }
                    }
                    else {
                        beginEdit(rowIndex);
                    }
                }
            },
             {
                 text: '@ViewBag.CustomFieldCancel',
                 iconCls: 'icon-cancel',
                 handler: cancelEdit
             }],
                onLoadSuccess: function (data) {
                    $(".datagrid-htable table tr td div span").css("text-align", "center");
                    if (data.rows.length == 0) {
                        $(".datagrid-view2 .datagrid-body").html("<div style='text-align:center; margin-top:0px; height:50px;'>" + Language_Domain_Index_NoDataMsg + "</div>");
                    }
                },
                onDblClickCell: function (rowIndex, field, value) {
                    if (!isEdit) beginEdit(rowIndex);
                },
                onClickRow: function (rowIndex, rowData) {
                    $('#tbList').datagrid('selectRow', rowIndex);
                    cancelEdit(rowIndex, rowData);
                }
                //                onAfterEdit: function (rowIndex, rowData, changes) {
                //                alert("onAfterEdit");
                //                 saveEdit(rowIndex, rowData);
                //                  }
            }).datagrid('getPager').pagination({ displayMsg: "" });
        }

        function cancelEdit(row, data) {
            if (isEdit) {
                $('#tbList').datagrid('rejectChanges');
                isEdit = false;
            }
        }
        function beginEdit(row) {
            $('#tbList').datagrid('beginEdit', row);
            $('#tbList').datagrid('selectRow', row);
            isEdit = true;
        }
        function dataValidate(data) {
            var flag = true;
            //            alert(data.FieldName + ":" + DataLength(data.FieldName));
            //            alert(data.CName + ":" + DataLength(data.CName));
            //            alert(data.EName + ":" + DataLength(data.EName));
            //alert(data.Remark + ":" + DataLength($.trim(data.Remark)));
            if (data.FieldName == "") {
                alert('"' + '@ViewBag.FieldName' + '"' + '@ViewBag.EmptyTips');
                flag = false;
                return flag;
            }
             //数据库中存的字段类型是nvarchar，不能按区别中英文算长度
            if ($.trim(data.FieldName).lenght > 50) {
                alert('"' + '@ViewBag.FieldName' + '"' + Language_Domain_AddDomain_CustomFieldLengthCheck);
                flag = false;
                return flag;
            }
            if (data.CName == "") {
                alert('"' + '@ViewBag.FieldCName' + '"' + '@ViewBag.EmptyTips');
                flag = false;
                return flag;
             }
            if (DataLength($.trim(data.CName)) > 50) {
                alert('"' + '@ViewBag.FieldCName' + '"' + Language_Domain_AddDomain_CustomFieldLengthCheck);
                flag = false;
                return flag;
            }
            if (data.EName == "") {
                alert('"' + '@ViewBag.FieldEName' + '"' + '@ViewBag.EmptyTips');
                flag = false;
                return flag;
             }
            if (DataLength($.trim(data.EName)) > 50) {
                alert('"' + '@ViewBag.FieldEName' + '"' + Language_Domain_AddDomain_CustomFieldLengthCheck);
                flag = false;
                return flag;
            }
            if (DataLength($.trim(data.Remark)) > 50) {
                alert('"' + '@ViewBag.FieldRemark' + '"' + Language_Domain_AddDomain_CustomFieldLengthCheck);
                flag = false;
                return flag;
            }
            return flag;

        }
        function saveEdit(row, data) {
            if (!dataValidate(data)) {
                return;
            }
            var url = '@Url.Content("~/Domain/EditCustomField?fieldId=")' + data.FieldId + "&domainId=" + '@(Model.DomainID)' + "&fieldName=" + encodeURIComponent($.trim(data.FieldName)) + '&cName=' + encodeURIComponent($.trim(data.CName)) + "&eName=" + encodeURIComponent($.trim(data.EName)) + "&fieldType=" + data.FieldType + "&isEnable=" + data.IsEnable + "&remark=" + encodeURIComponent($.trim(data.Remark));
            //            alert(data.IsEnable);
            //            alert(url);
            $.post(url, $("form").serialize(),
                function (data, state) {
                    if (state == "success") { }
                });
            //        $.ajax({
            //            url: url,
            //            type: 'POST',
            //            async: false,
            //            success: function (data) {
            //            },
            //            error: function (data) {
            //            }
            //        });
            isEdit = false;
            $('#tbList').datagrid('reload');
        }
        function adddata() {
            $('#tbList').datagrid('insertRow', { index: 0, row: {
                FieldName: '',
                CName: '',
                EName: '',
                FieldType: 6,
                Enable: '',
                Remark: ''
            }
            })
            beginEdit(0);
        }

        function editdata() {
            var row = $('#tbList').datagrid('getSelected');
            var rowIndex = $('#tbList').datagrid('getRowIndex', row);
            beginEdit(rowIndex);

        }

        function deletedata() {
            if (isEdit) {
                alert('@ViewBag.CustomFieldEditTips');
                return;
            }
            var row = $('#tbList').datagrid('getSelected');
            if (row != null) {
                var isdel = window.confirm('@ViewBag.CustomFieldDeleteTips');
                if (isdel) {
                    $.post('@Url.Content("~/Domain/DeleteCustomField?fieldId=")' + row.FieldId, $("form").serialize(),
                        function (data, state) {
                            if (state == "success") {
                                $('#tbList').datagrid('reload');
                            }
                        });
                 }
//                $.messager.confirm('@ViewBag.CustomFieldDeleteConfirm', '@ViewBag.CustomFieldDeleteTips', function (r) {
//                    if (r) {
//                        $.post('@Url.Content("~/Domain/DeleteCustomField?fieldId=")' + row.FieldId, $("form").serialize(),
//                        function (data, state) {
//                            if (state == "success") {
//                                $('#tbList').datagrid('reload');
//                            }
//                        });
//                    }
//                });
            };
        }
        //分页索引不能输入非数字
        function PagerCheck() {
            $(".pagination-num").keydown(function (event) {
                event = event || window.event;
                if (event.keyCode == 13)
                    event.keyCode = 9;
                if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                    event.returnValue = false;
                }
            });

        }