关于jqgrid下treeGrid的插件配置


将元素初始化为treegrid:

<script type="text/javascript">
        $(function () {
            $('#treegrid').jqGrid({
                treeGrid: true,
                treeGridModel: 'adjacency',
                ExpandColumn: 'DeptName',
                url: '/Department/Query/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['ID''部门名称''ParentID''主管''主管职代''说明','VisibilityValue'],
                colModel: [
                { name: 'ID', index: 'ID', hidden: true, width: 1, key: true },
                { name: 'DeptName', index: 'DeptName', width: 180 },
                { name: 'ParentID', index: 'ParentID', hidden: true, width: 1 },
                { name: 'Director', index: 'Director', width: 200, align: 'left' },
                { name: 'DeputyID', index: 'DeputyID', width: 200 },
                { name: 'Summary', index: 'Summary', width: 200 },
                { name: 'VisibilityValue', index: 'VisibilityValue', hidden: true, width: 1 }
            ],
                pager: '#ptreegrid',
                height: 'auto'
            });
        })
    </script>

关于Json对象说明:

{id: "1", name: "Cash",        num: "100", debit: "400.00",  credit: "250.00",  balance:"150.00",   enbl: "1", level: "0", parent: "null", isLeaf: false, expanded: false, loaded: true}

关于最后三个参数很关键!
<!DOCTYPE html> <html xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min14ed.css" /> <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/ui.jqgridffe4.css" /> <style> html, body { margin: 0; padding: 0; font-size: 75%; } </style> [removed][removed] [removed][removed] [removed][removed] [removed] $(document).ready(function(){ $.jgrid.defaults.styleUI="Bootstrap"; var topicjson={ "response": [ { "id": "1", "elementName": "Grouping", "url":"/asd/asda", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "1_1", "elementName": "Simple Grouping", "url":"/asd/12", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "1_2", "elementName": "May be some other grouping", "url":"/asd/14342", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "2", "elementName": "CustomFormater", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "2_1", "elementName": "Image Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true }, { "id": "2_3", "elementName": "Anchor Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true } ] }, grid; grid = jQuery("#jsonmap"); grid.jqGrid({ datastr: topicjson, datatype: "jsonstring", height: "auto", loadui: "disable", colNames: ["id","Items","url"], colModel: [ {name: "id",width:200, hidden:true, key:true}, {name: "elementName", editable:true,width:250, resizable: false}, {name: "url",width:200, editable:true,hidden:false} ], treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "elementName", treeIcons: {leaf:'ui-icon-document-b'}, caption: "jqGrid Demos", autowidth: true, rowNum: 10000, ExpandColClick: true, jsonReader: { repeatitems: false, root: "response" }, onSelectRow: function(id){ } }); }); [removed] </head> <body> <table id="jsonmap" ></table> </body> </html>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值