我正在研究动态绑定的jqgrid。我有所需的输出。但是我写了一个影响我的表现并且不可读的大代码。
我需要有人可以调查并优化我的代码。
提前致谢。
我已在我的工作代码here
中复制 $.each($.parseJSON(columnsData).Table1, function () {
// debugger;
//Push the column name.
colHeader.push(this.Name);
//Check the datatype of the column.
switch (this.Datatype) {
case 'number':
if (this.DefaultValue != null && this.DefaultValue != "") {
// debugger;
colname.push({
name: this.Name, index: this.Name, width: 100, align: 'left', formatter: 'number', sortable: true, editable: false, sorttype: 'int', hidden: JSON.parse(this.IsHidden), editoptions: {
defaultValue: this.DefaultValue
}, editrules: { required: JSON.parse(this.IsRequired) }
});
}
else {
colname.push({
name: this.Name, index: this.Name, width: 100, align: 'left', formatter: 'number', sortable: true, editable: false, sorttype: 'int', hidden: JSON.parse(this.IsHidden), editrules: { required: JSON.parse(this.IsRequired) }
});
}
lastFieldName = this.Name.toString(); //Store the fieldName.
break;
case 'DateTime':
if (this.DefaultValue != null && this.DefaultValue != "") {
//If datetime then enable datepicker in the filter and edit form.
colname.push({
name: this.Name, search: true, index: this.Name, width: 100, stype: "text", editable: true, hidden: JSON.parse(this.IsHidden), searchoptions: {
dataInit: function (el) {
$(el).datepicker({
dateFormat: 'm/d/yy', maxDate: 0, changeMonth: true, changeYear: true, onSelect: function (dateText, inst) {
setTimeout(function () {
$('#TransactionsGrid')[0].triggerToolbar();
}, 50);
}
});
}
}, editoptions: {
dataInit: function (el) {
$(el).datepicker({
dateFormat: 'm/d/yy', maxDate: 0, changeMonth: true, changeYear: true
});
}, defaultValue: this.DefaultValue, readonly: 'readonly'
}, editrules: { required: JSON.parse(this.IsRequired) }
});
}
else {
colname.push({
name: this.Name, search: true, index: this.Name, width: 100, stype: "text", editable: true, hidden: JSON.parse(this.IsHidden), searchoptions: {
dataInit: function (el) {
$(el).datepicker({
dateFormat: 'm/d/yy', maxDate: 0, changeMonth: true, changeYear: true, onSelect: function (dateText, inst) {
setTimeout(function () {
$('#TransactionsGrid')[0].triggerToolbar();
}, 50);
}
});
}
}, editoptions: {
dataInit: function (el) {
$(el).datepicker({
dateFormat: 'm/d/yy', maxDate: 0, changeMonth: true, changeYear: true
});
}
}, editrules: { required: JSON.parse(this.IsRequired) }
});
}
lastFieldName = this.Name.toString();
break;
case 'dropdown':
if (this.DefaultValue != null && this.DefaultValue != "") {
// debugger;
if (this.ValueType == "F") {
colname.push({
name: this.Name, index: this.Name, width: 100, edittype: "select", editable: true, hidden: JSON.parse(this.IsHidden),
//formatter: imageFormatter, unformat: imageUnFormat,
/*(Set tooltip of the gridcell)
cellattr: function (rowId, val, rawObject, cm, rdata) {
if (rawObject[cm.name + "_Title"] == "") {
return 'title="' + rawObject[cm.name] + '"';
}
else
return 'title="' + val + ' (' + rawObject[cm.name + "_Title"] + ')"';
},*/
//IF dropdown then bind the values during edit form.
editoptions: { value: ':Select;' + this.ValueList.slice(0, -1), defaultValue: this.DefaultValue }, editrules: { required: JSON.parse(this.IsRequired) }, stype: 'select'
, searchoptions: { value: ':All;' + this.ValueList.slice(0, -1) }, align: 'left', sortable: true
});
}
else {
colname.push({
name: this.Name, index: this.Name, width: 100, edittype: "select", label: this.ValueId, hidden: JSON.parse(this.IsHidden),
//IF dropdown then bind the values during edit form.
editoptions: { value: ':Select;' + this.ValueList.slice(0, -1), defaultValue: this.DefaultValue }, editrules: { required: JSON.parse(this.IsRequired) }, stype: 'select'
, searchoptions: { value: ':All;' + this.ValueList.slice(0, -1) }, align: 'left', sortable: true
});
}
}
else {
if (this.ValueType == "F") {
colname.push({
name: this.Name, index: this.Name, width: 100, edittype: "select", editable: true, hidden: JSON.parse(this.IsHidden),
//IF dropdown then bind the values during edit form.
editoptions: { value: ':Select;' + this.ValueList.slice(0, -1) }, editrules: { required: JSON.parse(this.IsRequired) }, stype: 'select'
, searchoptions: { value: ':All;' + this.ValueList.slice(0, -1) }, align: 'left', sortable: true
});
}
else {
colname.push({
name: this.Name, index: this.Name, width: 100, edittype: "select", label: this.ValueId, hidden: JSON.parse(this.IsHidden),
//IF dropdown then bind the values during edit form.
editoptions: { value: ':Select;' + this.ValueList.slice(0, -1) }, editrules: { required: JSON.parse(this.IsRequired) }, stype: 'select'
, searchoptions: { value: ':All;' + this.ValueList.slice(0, -1) }, align: 'left', sortable: true
});
}
}
break;
default:
if (this.DefaultValue != null && this.DefaultValue != "") {
colname.push({
name: this.Name, index: this.Name, width: 100, align: 'left', sortable: true, editable: true, hidden: JSON.parse(this.IsHidden), editrules: { required: JSON.parse(this.IsRequired) }
});
}
else {
colname.push({
name: this.Name, index: this.Name, width: 100, align: 'left', sortable: true, editable: true, hidden: JSON.parse(this.IsHidden), editrules: { required: JSON.parse(this.IsRequired) }
});
}
break;
}
});
jQuery("#TransactionsGrid").jqGrid({
data: $.parseJSON(gridData).BuildTransactionsDataTable,
datatype: "local",
hoverrows: false,
colNames: colHeader,
colModel: colname,
id: 'TransactionId',
rowNum: 10,
rownumbers: true,
sortname: '_id',
viewrecords: true,
sortorder: 'desc',
caption: "Transaction Details",
height: '250px',
gridview: true,
ignoreCase: true
});
由于代码太大而无法查看，我已经成了小提琴。请仔细研究
已更新：
我必须在我的控制器中处理的情况，当在客户端（this.DataType）中使用时，代码将是一个很大的。
//代码：
case FieldStyleModel.FieldType.Date:
case FieldStyleModel.FieldType.DropDownCalendar:
case FieldStyleModel.FieldType.DateWithoutDropDown:
case FieldStyleModel.FieldType.DateWithSpin:
drColumnDetails["Datatype"] = "date";
break;
case FieldStyleModel.FieldType.DateTime:
case FieldStyleModel.FieldType.DateTimeWithoutDropDown:
case FieldStyleModel.FieldType.DateTimeWithSpin:
drColumnDetails["Datatype"] = "datetime";
break;
case FieldStyleModel.FieldType.DropDown:
case FieldStyleModel.FieldType.DropDownList:
case FieldStyleModel.FieldType.DropDownValidate:
drColumnDetails["Datatype"] = "dropdown";
break;
case FieldStyleModel.FieldType.URL:
drColumnDetails["Datatype"] = "hyperlink";
break;
case FieldStyleModel.FieldType.IntegerNonNegative:
case FieldStyleModel.FieldType.IntegerNonNegativeWithSpin:
case FieldStyleModel.FieldType.IntegerPositive:
case FieldStyleModel.FieldType.IntegerPositiveWithSpin:
drColumnDetails["Datatype"] = "number";
break;
case FieldStyleModel.FieldType.Integer:
case FieldStyleModel.FieldType.IntegerWithSpin:
drColumnDetails["Datatype"] = "integer";
break;
case FieldStyleModel.FieldType.Time:
case FieldStyleModel.FieldType.TimeWithSpin:
case FieldStyleModel.FieldType.TimeZone:
drColumnDetails["Datatype"] = "Time";
break;
case FieldStyleModel.FieldType.CheckBox:
drColumnDetails["Datatype"] = "checkbox";
break;
default:
drColumnDetails["Datatype"] = "string";
break;
答案 0 :(得分：1)
小的共同评论：
height的值可以是height: 250或字符串"auto"或"100%"之类的数字。值'250px'不正确。我对height的偏好值为"auto"。id选项（请参阅代码中的id: 'TransactionId'）。sortname: '_id'。您是否真的在输入数据的每个项目中都有_id属性？$.parseJSON(gridData).BuildTransactionsDataTable仅包含数据应该被解释为文本而不是HTML片段，那么我建议您使用jqGrid的autoencode: true选项，如果在网格中加载数千行数据，那么the answer中描述的技巧可以提高网格中数据加载的性能。您只需要执行两个步骤：
sortname和sortorder选项。对大型数据集进行排序可能需要一些时间。否sortname（或sortname: ""）表示显示未排序数据。它将改善初始加载数据的性能。data选项，并将其设置在onInitGrid回调中：$("#TransactionsGrid").jqGrid({
datatype: "local",
hoverrows: false,
colNames: colHeader,
colModel: colname,
rowNum: 10,
rownumbers: true,
viewrecords: true,
caption: "Transaction Details",
height: "auto",
gridview: true,
autoencode: true,
ignoreCase: true,
onInitGrid: function () {
// get reference to parameters
var p = $(this).jqGrid("getGridParam");
// set data parameter
p.data = $.parseJSON(gridData).BuildTransactionsDataTable;
}
});
the answer加载了90000行数据，加载大约需要52-130毫秒，具体取决于我使用的网络浏览器。在我看来，这是个好时机。没有技巧（参见the demo），数据加载大约需要1600-11000毫秒。如果添加数据排序（参见one more demo），那么我得到2100-29000毫秒之间的时间。
更新：首先，您应该从JavaScript代码中删除所有不需要的东西。
index属性必须与name属性的值相同。如果您在内部删除index属性，则jqGrid将创建正确的index值。因此，我严格建议您不要在index中指定colModel个属性。colModel中的cmTemplate项移动所有常用属性（或最常见的属性）。例如，如果您在width: 100的所有项目中使用colModel，则应删除该属性并添加jqGrid选项cmTemplate: { width: 100 }，而不是将属性width放在colModel。colModel属性。您会发现放置align: 'left'，editable: false，sortable: true，stype: "text"和其他一些属性不需要。我建议你删除这些属性。key: true 2中添加colModel属性，则无需向用户显示ID。如果您不需要使用数据创建任何隐藏列。而不是你可以添加localReader: { id: "TransactionId" }选项来通知jqGrid获取rowid的位置。原生rowid的使用对于编辑尤其实用。带有rowid的id参数将在编辑期间由jqGrid发送到服务器。我建议你另外使用prmNames: { id: "TransactionId" }。在jqGrid的情况下，名称为rowid为"TransactionId"的属性，而不是编辑期间默认名称"id" 。colNames name属性的值填充colModel。你不需要这样做。我建议您在所有情况下不要指定colNames选项。如果colNames不存在，jqGrid将在内部填充label colModel name属性值或label属性值。null，""，" "等）值的列。它使用户更容易阅读网格并提高网格的性能。对于Web浏览器来说，显示许多列比显示许多行要昂贵得多。因此，隐藏不需要的列可以提高网格的性能。name属性值。您当前的代码包含name: "Employee Name"或name: "Avg.Num Of Steps Occur"的列。了解name属性将用于构建某些内部jqGrid元素的id属性并将在选择器中使用，这一点非常重要。 jQuery选择器不应包含任何meta-charackters（!"#$%&'()*+,./:;<=>?@[\]^``{|}~）。另外，例如HTML 4的id不能包含空格。见here。我严格建议你只使用字母（[A-Za-z]），数字（[0-9]），连字符（＆＃34; - ＆＃34;）或下划线（＆＃34; _＆＃34; ）name。第一个符号应该是一个字母。如果您不遵守该规则，您可能会遇到很多问题（排序，搜索等问题）。您可能应该设置label: this.Name属性，并使用一些规则根据name构建正确的this.Name值。您应该在编辑期间包含具有原始this.Name属性的属性，以便编辑结果与修复name属性之前的结果相同。结果我将您的代码修改为以下内容：http://jsfiddle.net/z1ujyh02/6/。我在下面列出的代码中最重要的部分：
var columnsData = "...", gridData = "...";
var mydata = $.parseJSON(gridData).BuildTransactionsDataTable, existingProperties = {},
numberTemplate = {formatter: 'number', sorttype: 'int'},
dateTemplate = {
editable: true,
searchoptions: {
dataInit: function (el) {
var self = this;
$(el).datepicker({
dateFormat: 'm/d/yy', maxDate: 0, changeMonth: true, changeYear: true,
onSelect: function (dateText, inst) {
setTimeout(function () {
self.triggerToolbar();
}, 50);
}
});
}
},
editoptions: {
dataInit: function (el) {
$(el).datepicker({
dateFormat: 'm/d/yy', maxDate: 0, changeMonth: true, changeYear: true
});
},
readonly: 'readonly'
}
}
dropdownTemplate = {
edittype: "select",
editable: true,
stype: "select"
};
$.each(mydata, function () {
var p;
for (p in this) {
if (this.hasOwnProperty(p) && this[p] !== null && (typeof this[p] === "string" && $.trim(this[p]) !== "")) {
existingProperties[p] = true;
}
}
});
var colname = [{ name: "TransactionId", sorttype: "int", key: true }];
//Loop into the column values collection and push into the array.
$.each($.parseJSON(columnsData).Table1, function () {
//Check the datatype of the column.
var cm = {
name: this.Name,
hidden: JSON.parse(this.IsHidden) || !existingProperties.hasOwnProperty(this.Name),
editoptions: this.DefaultValue != null && this.DefaultValue != "" ? { defaultValue: this.DefaultValue } : {},
editrules: { required: JSON.parse(this.IsRequired) }
};
switch (this.Datatype) {
case 'number':
$.extend(true, cm, { template: numberTemplate });
lastFieldName = cm.name; //Store the fieldName.
break;
case 'DateTime':
$.extend(true, cm, { template: dateTemplate });
lastFieldName = cm.name;
break;
case 'dropdown':
var values = this.ValueList.slice(0, -1);
$.extend(true, cm, {
template: dropdownTemplate,
editoptions: { value: ":Select;" + values, defaultValue: this.DefaultValue },
searchoptions: { value: ":All;" + values }
},
this.ValueType == "F" ? { label: this.ValueId } : {} );
break;
default:
break;
}
if (cm)
colname.push(cm);
});
//Binding grid Starts.
$("#TransactionsGrid").jqGrid({
//data: mydata,
datatype: "local",
hoverrows: false,
colModel: colname,
rowNum: 10,
rownumbers: true,
pager: "#TransactionsPager",
localReader: { id: "TransactionId" },
prmNames: { id: "TransactionId" },
viewrecords: true,
caption: "Transaction Details",
height: "auto",
gridview: true,
autoencode: true,
ignoreCase: true,
cmTemplate: { width: 100 },
onInitGrid: function () {
// get reference to parameters
var p = $(this).jqGrid("getGridParam");
// set data parameter
p.data = mydata;
}
});