使用jqgrid动作格式化程序

时间:2013-05-06 09:57:09

标签: asp.net jqgrid

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

添加操作之前

enter image description here

添加动作后

enter image description here

萤火虫中的网格:

enter image description here

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

3 个答案:

答案 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中移除方向选项,让我们知道它是否有效