JqGrid 自定義子表格 及 自定義Json 格式數據不展示

項目第一次使用JqGrid ，發現功能強大，但由於對他不熟悉，也沒有少走彎路，記錄一下。

 

1、引用

<link href="~/Scripts/JqGrid/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Scripts/JqGrid/jqgrid/css/css/start/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script src="~/Scripts/JqGrid/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/JqGrid/jqgrid/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="/Scripts/JqGrid/jqgrid/js/i18n/grid.locale-cn.js"></script>

 

2、頁面

   <script>
        $(function () {
            //頁面加載完成之后執行
            pageInit();
        });
        function pageInit() {
            //創建jqGrid組件
            $("#list2").jqGrid(
                    {
                        url: '/ZhuTiFenXi/JSONData',//組件創建完成之后請求數據的url
                        datatype: "json",//請求數據返回的類型。可選json,xml,txt
                        colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],//jqGrid的列顯示名字
                        colModel: [ //jqGrid每一列的配置信息。包括名字，索引，寬度,對齊方式.....
                                     { name: 'id', index: 'id', width: 90，key:true },   //key:true 是設置主鍵，也就是下面的row_id的值
                                     { name: 'invdate', index: 'invdate', width: 90 },
                                     { name: 'name', index: 'name asc, invdate', width: 100 },
                                     { name: 'amount', index: 'amount', width: 80, align: "right" },
                                     { name: 'tax', index: 'tax', width: 80, align: "right" },
                                     { name: 'total', index: 'total', width: 80, align: "right" },
                                     { name: 'note', index: 'note', width: 150, sortable: false }
                        ],
                        rowNum: 10,//一頁顯示多少條
                        rowList: [10, 20, 30],//可供用戶選擇一頁顯示多少條
                        pager: '#pager2',//表格頁腳的占位符(一般是div)的id
                        sortname: 'id',//初始化的時候排序的字段
                        sortorder: "desc",//排序方式,可選desc,asc
                        mtype: "post",//向后台請求數據的ajax的類型。可選post,get
　　　　　　　　　
                        viewrecords: true,
                     width: 998,
                        height: 650, //可以自己設置寬高
                        jsonReader: { repeatitems: false}, // 大坑在這里，這個屬性沒有寫，chrome 中正常顯示，IE和firefox中死都不出來，在網上搜索了很久才發現，oh shit !
                        //caption: "JSON Example",//表格的標題名字
                        subGrid: true,  //設置是否顯示加號
                        subGridRowExpanded: function (subgrid_id, row_id) {  //subGridRowExpanded可以自定義表格類型， subgrid_id 是主表格的Id，row_id 是你選中的行的Id
                            $.ajax({
                                url: '/ZhuTiFenXi/JSONData',
                                data: {},
                                success: function (data) {
                                    $("#" + subgrid_id).html("<table><tr><td>分頁數：</td><td>" + data.page + "</td></tr></table>");
                                    $("#" + subgrid_id).append("<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><table><tr><td>分頁數：</td><td>" + data.page + "</td></tr></table>");
                                    $("#" + subgrid_id).append("<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><table><tr><td>分頁數：</td><td>" + data.page + "</td></tr></table>");
                                },
                                error: function (err) {
                                    alert("err=" + data);
                                }
                            });
                        }
                        //, caption: "Subgrid Example"

                    }).trigger("reloadGrid");
            /*創建jqGrid的操作按鈕容器*/
            /*可以控制界面上增刪改查的按鈕是否顯示*/
            jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false ,refresh:false,search:false}); //這兩個屬性控制左下角查詢和刷新的
        }
    </script>

  //查詢觸發函數，查詢的時候講值從新帶到jqGrid中
        function SerachData() {
            var userName = $("#userName").val();
            var cardId = $("#cardId").val();//

            if (userName == "" && cardId=="") {
                alert("請添加查詢條件，在操作");
                return;
            }

            $.ajax({
                type: "POST",
                url: '/ZhuTiFenXi/JsonPersonInfoList',
                dataType: 'json',
                data: { 'userName': userName, 'cardId': cardId },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    
                },
                success: function (data) {
                    if (data) {
                        var mygrid = $('#list2')[0];//必須要加，這個是個集合 就跟dataset一樣
                        var myjsongrid = data;
                        mygrid.addJSONData(myjsongrid);
                    }
                } 
            });
        }

 

 

 

 

3、 后台數據

   public ActionResult JSONData()
        {

            List<LS_CLASS> lis = new List<LS_CLASS>();
            LS_CLASS entity=new LS_CLASS();
            entity.id="13";
            entity.invdate = "2007-10-06";
            entity.name = "Client3";
            entity.amount = "1000.00";
            entity.tax = "0.00";
            entity.total = "1000.00";
            entity.note = "";
            lis.Add(entity);

            LS_CLASS entity1=new LS_CLASS();
            entity1.id="14";
            entity1.invdate = "2007-10-06";
            entity1.name = "Client3";
            entity1.amount = "1100.00";
            entity1.tax = "1.00";
            entity1.total = "2000.00";
            entity1.note = "232323";
            lis.Add(entity1);

            LS_CLASS entity2 = new LS_CLASS();
            entity2.id = "15";
            entity2.invdate = "2007-10-06";
            entity2.name = "Client3";
            entity2.amount = "1100.00";
            entity2.tax = "1.00";
            entity2.total = "2000.00";
            entity2.note = "232323";
            lis.Add(entity2);

            LS_CLASS entity3 = new LS_CLASS();
            entity3.id = "16";
            entity3.invdate = "2007-10-06";
            entity3.name = "Client3";
            entity3.amount = "1100.00";
            entity3.tax = "1.00";
            entity3.total = "2000.00";
            entity3.note = "232323";
            lis.Add(entity3);

            var a = new { page = 1, total = 2, records = 13, rows = lis, userdata = new { amount = 3220, tax = 342, total = 3564, name = "", Totals = "" } };
            return Json(a,JsonRequestBehavior.AllowGet);
        }


 　　//單獨一個類
    public class LS_CLASS
    {
        public string id { get; set; }
        public string invdate { get; set; }
        public string name { get; set; }
        public string amount { get; set; }
        public string tax { get; set; }
        public string total { get; set; }
        public string note { get; set; }
    }

 

4、效果