我用ashx文件填充网格,工作正常。 当我在网格中添加动作时,单元格向右和最后一列的数据显示为空。
添加操作之前
添加动作后
萤火虫中的网格:
ASHX:
public void ProcessRequest(HttpContext context) {
HttpRequest request = context.Request;
HttpResponse response = context.Response;
string _search = request["_search"];
string numberOfRows = request["rows"];
string pageIndex = request["page"];
string sortColumnName = request["sidx"];
string sortOrderBy = request["sord"];
int totalRecords;
Collection<User> users = GetDummyUsers(numberOfRows, pageIndex, sortColumnName, sortOrderBy, out totalRecords);
string output = BuildJQGridResults (users, Convert.ToInt32 (numberOfRows), Convert.ToInt32 (pageIndex), Convert.ToInt32 (totalRecords));
response.Write (output);
}
创建用户:
private Collection<User> GetDummyUsers(string numberOfRows, string pageIndex, string sortColumnName, string sortOrderBy, out int totalRecords) {
var data = new Collection<User> {
new User(){ UserID = 1,UserName = "Bill Gates", FirstName = "Bill", LastName = "Gates",EmailID = "test@microsoft.com", },
new User(){ UserID = 1,UserName = "Bill Gates", FirstName = "Bill", LastName = "Gates",EmailID = "test@microsoft.com", },
new User(){ UserID = 1,UserName = "Bill Gates", FirstName = "Bill", LastName = "Gates",EmailID = "test@microsoft.com", },
};
totalRecords = data.Count;
return data;
}
ConvetTo json:
private string BuildJQGridResults(Collection<User> users, int numberOfRows, int pageIndex, int totalRecords) {
JQGridResults result = new JQGridResults ();
List<JQGridRow> rows = new List<JQGridRow> ();
foreach (User user in users) {
JQGridRow row = new JQGridRow ();
row.id = user.UserID;
row.cell = new string[5];
row.cell[0] = user.UserID.ToString ();
row.cell[1] = user.UserName;
row.cell[2] = user.FirstName;
row.cell[3] = user.LastName;
row.cell[4] = user.EmailID;
rows.Add (row);
}
result.rows = rows.ToArray ();
result.page = pageIndex;
result.total = (totalRecords + numberOfRows - 1) / numberOfRows;
result.records = totalRecords;
return new JavaScriptSerializer ().Serialize (result);
}
格:
url: 'jqGridHandler.ashx',
datatype: 'json',
autowidth: true,
height: 100,
colNames: ['ACTION', 'ID', 'UserName', 'FirstName', 'LastName', 'EmailID'],
colModel: [
{
name: 'act', width: 100, align: 'center', sortable: false, formatter: 'actions',
formatoptions: {
keys: true,
delOptions: true,
delbutton:true,
editbutton:false
}
},
{ name: 'UserID', width: 100, sortable: true, },
{ name: 'UserName', width: 100, sortable: true },
{ name: 'FirstName', width: 100, sortable: true },
{ name: 'LastName', width: 100, sortable: true },
{ name: 'EmailID', width: 100, sortable: true },
],
rowNum: 20,
loadonce: true,
rowList: [5, 10, 20],
recordpos: "left",
ignoreCase: true,
toppager: true,
viewrecords: true,
sortorder: "desc",
scrollOffset: 1,
});
});
答案 0 :(得分:2)
jqGrid将actions
视为真实列,并且它需要数据。最简单的方法是在服务器端的行中添加空单元格:
private string BuildJQGridResults(Collection<User> users, int numberOfRows, int pageIndex, int totalRecords) {
JQGridResults result = new JQGridResults ();
List<JQGridRow> rows = new List<JQGridRow> ();
foreach (User user in users) {
JQGridRow row = new JQGridRow ();
row.id = user.UserID;
row.cell = new string[6];
row.cell[0] = String.Empty;
row.cell[1] = user.UserID.ToString ();
row.cell[2] = user.UserName;
row.cell[3] = user.FirstName;
row.cell[4] = user.LastName;
row.cell[5] = user.EmailID;
rows.Add (row);
}
result.rows = rows.ToArray ();
result.page = pageIndex;
result.total = (totalRecords + numberOfRows - 1) / numberOfRows;
result.records = totalRecords;
return new JavaScriptSerializer ().Serialize (result);
}
作为替代方案,您可以在repeatItems: false
模式下使用jqGrid。首先,您需要更改jqGrid初始化脚本:
$("#UsersGrid").jqGrid({
url: 'jqGridHandler.ashx',
datatype: 'json',
autowidth: true,
height: 100,
colNames: ['ACTION', 'ID', 'UserName', 'FirstName', 'LastName', 'EmailID'],
colModel: [
{ name: 'act', width: 100, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: true, delOptions: true, delbutton:true, editbutton:false } },
{ name: 'UserID', width: 100, sortable: true, },
{ name: 'UserName', width: 100, sortable: true },
{ name: 'FirstName', width: 100, sortable: true },
{ name: 'LastName', width: 100, sortable: true },
{ name: 'EmailID', width: 100, sortable: true },
],
rowNum: 20,
loadonce: true,
rowList: [5, 10, 20],
recordpos: 'left',
ignoreCase: true,
toppager: true,
viewrecords: true,
sortorder: 'desc',
scrollOffset: 1,
jsonReader : {
repeatitems: false
}
});
现在在服务器端你不能再使用数组,你必须使用对象或字典。我将展示更通用的方法,即字典。假设您的解决方案基于this示例,则必须更改JQGridResult
类,如下所示:
public class JQGridResults
{
public int page;
public int total;
public int records;
public List<Dictionary<string, string>> rows;
}
现在您的方法可能如下所示:
private string BuildJQGridResults(Collection<User> users, int numberOfRows, int pageIndex, int totalRecords) {
JQGridResults result = new JQGridResults();
result.rows = new List<Dictionary<string, string>>();
foreach (User user in users) {
Dictionary<string, string> row = new Dictionary<string, string>();
row.Add("id", user.UserID.ToString());
row.Add("UserID", user.UserID.ToString());
row.Add("UserName", user.UserName);
row.Add("FirstName", user.FirstName);
row.Add("LastName", user.LastName);
row.Add("EmailID", user.EmailID);
result.rows.Add(row);
}
result.page = pageIndex;
result.total = (totalRecords + numberOfRows - 1) / numberOfRows;
result.records = totalRecords;
return new JavaScriptSerializer().Serialize(result);
}
这可以进一步优化,以避免两次发送UserId
,但从您的问题来看,这不是重要的。
答案 1 :(得分:0)
我的浏览器中的代码完全正常。尝试使用此代码。 Hopw它的工作原理也只是检查你的webdeveloper工具你是否收到任何错误。 同时粘贴myDelOptions的代码。
$("#datagrid").jqGrid({
url: 'jqGridHandler.ashx',
datatype: 'json',
autowidth: true,
height: 100,
colNames: [ 'ACTION', 'EOSysNum', 'PctIndNum', 'PctLettSubject', 'PctAssignSubject', ],
colModel: [
{
name: 'act', width: 100, align: 'center', sortable: false, formatter: 'actions',
formatoptions: {
keys: true,
delOptions: true,
delbutton:true,
editbutton:false
}
},
{ name: 'EOSysNum', index: 'UserID', width: 50, sortable: true, hidden: false },
{ name: 'PctIndNum', width: 140, sortable: true },
{ name: 'PctLettSubject', width: 140, sortable: true },
{ name: 'PctAssignSubject', width: 100, sortable: true },
],
rowNum: 20,
loadonce: true,
rowList: [5, 10, 20],
recordpos: "left",
ignoreCase: true,
toppager: true,
viewrecords: true,
sortorder: "desc",
scrollOffset: 1,
});
答案 2 :(得分:-1)
从jqgrid中移除方向选项,让我们知道它是否有效