jqgrid中建立subgrid以及操作行数据

$(document).ready(function(){
                $("#grid").jqGrid({
                    url:testurl,
                    datatype: 'json',
                    mtype: 'POST',
          
                    colNames:['<b>名称</b>','<b>展示次数</b>', '<b>点击次数</b>','<b>点击率</b>'],
                    colModel:[
                        {name:'name',index:'name',sortable:false,width:150,editable:false,editoptions:{readonly:false,size:15},align:"left"},
                        {name:'show',index:'show',sortable:true,width:130,editable:false,editoptions:{size:10},align:"right"},
                        {name:'click',index:'click',sortable:true,width:140,editable:false,editoptions:{size:25},align:"right"},
                        {name:'cr',index:'cr',sortable:true,width:140,editable:false,editoptions:{readonly:true,size:10},align:"right"},
                    ],
                    pager: $('#pager'),                //分页层
                    rowNum:20,                      //每页的记录数
                    rowList:[10,20,30],             //一个数组用来调整表格显示的记录数
                    imgpath: 'themes/sand/images',  //图片路径
                    sortname: '1',                 //排序列的名称,此参数会被传到后台
                    viewrecords: true,              //是否要显示总记录数
                    sortorder: "desc",              //排序顺序,升序或者降序(asc or desc)
                                        shrinkToFit:true,
                                        autowidth:true,
                    subGrid : true,
                    //subGridUrl:‘’,
                    //subGridModel: [{ //name  : ['','', '', '','','',''],
                    //                name  : ['','', '', ''],
                                    //width : [147,127,137,137,157,157,157],
                        //            width : [296,253,275,270],
                    //                align : ['left','right','right','right','right','right','right'],
                    //                params:['invdate']}
                                    
                    //],
                    subGridRowExpanded:function(subgrid_id, row_id){
                        var subgrid_table_id;
                         subgrid_table_id = subgrid_id+"_t";
                         jQuery("#"+subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
                         jQuery("#"+subgrid_table_id).jqGrid({
                             url:'__URL__/getGridList/openjqgrid/1/segmentype/groups/method/getSecondAreaByAreaid'+JQGRID_PARAMETER+'?id='+row_id,
                             datatype: "json",
                             mtype: 'POST',
                             colNames:['','','',''],
                             colModel: [
                                        {name:'name',index:'name',sortable:false,width:296,editable:false,align:"left"},
                                        {name:'show',index:'show',sortable:true,width:253,editable:false,align:"right"},
                                        {name:'click',index:'click',sortable:true,width:275,editable:false,align:"right"},
                                        {name:'cr',index:'cr',sortable:true,width:270,editable:false,align:"right"}
                            ],
                            sortname: '1',
                            sortorder: "desc",
                            altRows:true,
                            height:"100%",
                            caption: "" ,
                            shrinkToFit:true,
                            autowidth:true,
                            gridComplete:function(){
                                //隐藏标题栏
                                var p= $("#"+subgrid_table_id).parent().parent().parent()
                                p=$(p).find("table").first().hide();
                                //获得所有行数据
                                var subObj = $("#"+subgrid_table_id).jqGrid("getRowData");
                                var show = 0;
                                var click = 0;
                                var cr;
                                
                                 for(var i=0, len=subObj.length; i<len; i++) {
                                     show += parseInt(subObj[i].show.replace(",", ""));
                                     click += parseInt(subObj[i].click.replace(",", ""));
                                 }
                                 var rowData = $("#grid").jqGrid("getRowData",row_id);   //获得指定row_id的行数据
                                 if(parseInt(rowData.show.replace(",", "")) != show) {
                                     if(show != 0) {
                                         cr = (click*100/show).toFixed(2) + "%";
                                     } else {
                                         cr = "0%";

                                     }

                                      //设置行数据

                                     $("#area_grid").setRowData( row_id, {show:formatNum(show.toString()), click:formatNum(click.toString()), cr:cr});
                                 }
                           }
                         });
                    },
                    
            
                    //multiboxonly: true,              //定义是否可以多选
                    //multiselect : true,
                    altRows:true,                   //设置表格 zebra-striped 值(定义隔行变色)
                    height:"100%",                  //设置表格高度
                    prmNames: {_search: "search"},
                    caption: ""                    //定义表格名称
                });
                jQuery("#area_grid").jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:false,refresh:false});
                jQuery("#area_grid").jqGrid('navButtonAdd','#pager',{
                    caption: "自定义列",
                    title: "从左边移动到右边",
                    onClickButton : function (){ jQuery("#area_grid").jqGrid('columnChooser'); }
                });
                
            });
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要构建符合 jqGrid treeReader 标准的 List,需要满足以下要求: 1. List 每个节点都要包含 `id`、`parent`、`level` 和 `isLeaf` 四个属性,其 `id` 表示节点的唯一标识,`parent` 表示该节点的父节点标识,`level` 表示该节点的层级,`isLeaf` 表示该节点是否为叶子节点。 2. 如果该节点为非叶子节点,则需要包含一个名为 `children` 的 List 属性,该属性存储该节点的所有子节点。 下面是一个示例代码,用于构建一个符合 jqGrid treeReader 标准的 List: ```csharp public class TreeNode { public int id {get; set;} public int parent {get; set;} public int level {get; set;} public bool isLeaf {get; set;} public List<TreeNode> children {get; set;} } public List<TreeNode> BuildTree(List<DataItem> dataItems) { List<TreeNode> treeNodes = new List<TreeNode>(); foreach (DataItem dataItem in dataItems) { TreeNode treeNode = new TreeNode(); treeNode.id = dataItem.Id; treeNode.parent = dataItem.ParentId; treeNode.level = dataItem.Level; treeNode.isLeaf = dataItem.IsLeaf; if (!treeNode.isLeaf) // 如果该节点为非叶子节点 { // 递归构建该节点的所有子节点 treeNode.children = BuildTree(dataItems.Where(x => x.ParentId == dataItem.Id).ToList()); } treeNodes.Add(treeNode); } return treeNodes; } ``` 在上述代码,我们通过递归构建每个节点的子节点,从而构建一个符合 jqGrid treeReader 标准的 List,并返回该 List。需要注意的是,在构建非叶子节点时,需要为其 `children` 属性赋值,以存储该节点的所有子节点。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值