asp.net - 使用 jqgrid 动作格式化程序

Question

我用 ashx 文件填充网格，它的工作正常。当我在网格中添加动作时，单元格数据向右移动，最后一列显示为 Null。

添加操作之前

添加动作后

萤火虫中的网格：

灰烬：

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

转换到 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,
        });
    });

Answer 1

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

现在在服务器端你不能再使用数组，你必须使用对象或字典。我将展示更通用的方法，即字典。假设您的解决方案基于此示例，您将不得不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两次，但从您的问题的角度来看，这不是重要的。

Answer 2

代码在我的浏览器中运行良好。试试这个代码。它的工作原理也只是检查您的 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,
       });

Answer 3

从 jqgrid 中删除方向选项，让我们知道它是否有效