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; } }); }