JQGrid 嵌套字表, json数据

最新推荐文章于 2018-07-19 14:31:14 发布

weixin_34146805

最新推荐文章于 2018-07-19 14:31:14 发布

阅读量119

点赞数

文章标签： json javascript c# ViewUI

原文链接：http://www.cnblogs.com/Mr-Joe/archive/2012/03/22/2411925.html

版权

前台代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="jquery.jqGrid-4.3.1/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="jquery.jqGrid-4.3.1/js/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" />
    <script type="text/javascript">
        $(function () {
            var subid;

            var subPagerid;
            jQuery("#sg1").jqGrid({
                url: "Handler.ashx?q=1&id=0",
                datatype: "json",
                height: 300,
                width: 600,
                colNames: ['姓名', 'group1', '时间'],
                colModel: [
                                   { name: 'name', index: 'name', width: 55, editable: true, edittype: "text" },
                                   { name: 'group11', index: 'group1', width: 90, editable: true, edittype: "text" },
                                   { name: 'time', index: 'time', width: 100, editable: true, edittype: "text" }

                               ],
                rowNum: 8,
                editurl: "Handler.ashx?q=1&id=0", //编辑 ajax请求的url
                rowList: [8, 10, 20, 30],
                pager: '#psg1',
                sortname: 'name',
                viewrecords: true,
                sortorder: "desc",
                multiselect: false,
                subGrid: true,
                caption: "请假申请单",
                jsonReader: {
                    root: "rows",
                    total: "total",
                    repeatitems: false
                },
                onSelectRow: function (id) {
                    if (id && id !== lastsel) {
                        lastsel = id;
                        // jQuery('#sg1').jqGrid('restoreRow', lastsel); //lastsel是编辑第几行的行数
                        jQuery('#sg1').jqGrid('editRow', id, true); //行内编辑

}
},

                // define the icons in subgrid
                subGridOptions: {
                    "plusicon": "ui-icon-triangle-1-e",
                    "minusicon": "ui-icon-triangle-1-s",
                    "openicon": "ui-icon-arrowreturn-1-e",
                    // load the subgrid data only once
                    // and the just show/hide
                    "reloadOnExpand": false,
                    // select the row when the expand column is clicked
                    "selectOnExpand": true
                },

subGridRowExpanded: function (subgrid_id, row_id) {

                    var subgrid_table_id, pager_id;
                    subgrid_table_id = subgrid_id + "_t";
                    subid = subgrid_table_id;
                    pager_id = "p_" + subgrid_table_id;
                    $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
                    jQuery("#" + subgrid_table_id).jqGrid({
                        url: "Handler.ashx?q=2&id=" + row_id + "&ss=" + subgrid_id,
                        datatype: "json",
                        colNames: ['原因'],
                        colModel: [
                { name: "reason", index: "reason", width: 400, editable: true, edittype: "text" }

            ],
                        rowNum: 20,
                        pager: pager_id,
                        // sortname: 'num',
                        //sortorder: "asc",
                        height: '100%',
                        height: '100%',
                        jsonReader: {
                            root: "rows",
                            total: "total",
                            repeatitems: false
                        },
                        onSelectRow: function (id) {
                            if (id && id !== lastsel) {
                                lastsel = id;
                                // jQuery('#sg1').jqGrid('restoreRow', lastsel); //lastsel是编辑第几行的行数
                                jQuery('#' + subid).jqGrid('editRow', id, true); //行内编辑

                            }
                        },
                        editurl: "Handler.ashx" //编辑 ajax请求的url
                    });
                    jQuery("#" + subid).jqGrid('navGrid', '#' +subPagerid, { edit: true, add: true, del: true }, {}, {}, {}, { multipleSearch: true, multipleGroup: true }); //配置多项查询
                  // jQuery("#" + subid).jqGrid('inlineNav', "#" + subid); //配置行内编辑配合上面onSelectRow事件内的行内编辑一起使用
                }
            });
            // jQuery("#sg1").jqGrid('navGrid', '#psg1', { add: false, edit: false, del: false });
            jQuery("#sg1").jqGrid('navGrid', '#psg1', { edit: true, add: true, del: true }, {}, {}, {}, { multipleSearch: true, multipleGroup: true }); //配置多项查询
            jQuery("#sg1").jqGrid('inlineNav', "#sg1"); //配置行内编辑配合上面onSelectRow事件内的行内编辑一起使用

        })
    </script>
</head>
<body>
    <table id="sg1">
    </table>
    <div id="psg1">
    </div>
</body>
</html>

服务器端代码: 一般处理程序

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        int id = int.Parse(context.Request.QueryString["q"]);
        int row = int.Parse(context.Request.QueryString["id"]);
        string resp = string.Empty;
        if (id == 1)
        {

resp = "{ \"total\": \"1\", \"page\": \"1\", \"records\": \"10\", \"rows\" : [ {\"name\":\"小命\",\"group1\":\"\",\"time\":\"2012-20-20\"}, {\"name\":\"小强\",\"group1\":\"\",\"time\":\"2012-20-20\"}, {\"name\":\"厨师\",\"group1\":\"\",\"time\":\"2012-10-20\"}]}";

        }
        if (row == 1)
        {
            resp = "{ \"total\": \"1\", \"page\": \"1\",   \"records\": \"10\", \"rows\" : [{\"reason\":\"不想上\" },{\"reason\":\"还是不想上\" }]}";

}

        if (row == 2)
        {
            resp = "{ \"total\": \"1\", \"page\": \"1\",   \"records\": \"10\", \"rows\" : [{\"reason\":\"好累啊\" },{\"reason\":\"还行,不是很累\" }]}";

}

context.Response.Write(resp);
}

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

转载于:https://www.cnblogs.com/Mr-Joe/archive/2012/03/22/2411925.html

weixin_34146805

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQGrid 嵌套字表, json数据

前台代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="jquery.jqGrid-4.3.1/css/ui.jqgrid.css" rel="stylesheet" type="text/cs...
复制链接

扫一扫