jqGrid的樹形表格：treeGrid

ゝ一纸荒年。 2021-06-24 13:59 461阅读 0赞

第一個列子   
/pages/demo/tree.json   
\----------------------------------

{
        "total":11,
        "page":1,
        "records":11,
        "rows":[
            {"id":1, "name":"Pandy1", "cell":["第一級1",0,null,false,false]},
            {"id":3, "name":"Pandy2", "cell":["第二級1",1,1,true,false]},
            {"id":2, "name":"Pandy3", "cell":["第一級2",0,null,true,false]}
        ]
    }

jsp页面：

<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
    <%@ include file="/common/taglibs.jsp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Insert title here</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="<c:url value="/pages/org/grid.treegrid.js"/>"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#treegrid").jqGrid({
                    treeGrid: true,
                    treeGridModel: 'adjacency',
                    ExpandColumn: 'name',
                    ExpandColClick: true,
                    url: '/pages/demo/tree.json',
                    datatype: 'json',
                    colNames: ["管理選項"],
                    colModel: [
                        { name: 'name', index: 'name' }
                    ],
                    pager: "false",
                    height: 'auto',
                    width: '210',
                    viewrecords: true,
                    //   caption: 'none',
                    jsonReader: {
                        root: "rows",
                        total: "total",
                        repeatitems: true
                    }
    
                });
            })
            ;
        </script>
    
    </head>
    <body>
    <table id="treegrid"></table>
    <div id="ptreegrid"></div>
    </body>
    </html>

第二个例子：

<pre class="js" name="code" style="margin-top: 0px; margin-bottom: 1em; padding: 0px; list-style-type: none; font-family: 'Courier New', monospace; font-size: 12px; width: 869.21875px; overflow: auto; color: rgb(51, 51, 51); line-height: 25px; background: rgb(247, 247, 247);">[
        {"id":0,"username":"王三1","level":0,"address":"USA","isLeaf":false,"age":20,"expanded":true,"password":"123"},
        {"id":1,"username":"王三2","level":1,"address":"USA","isLeaf":false,"age":21,"parent":0,"expanded":true,"password":"123"},
        {"id":2,"username":"王三3","level":2,"address":"USA","isLeaf":true,"age":22,"parent":1,"expanded":true,"password":"123"}
    ]

<pre class="html" name="code" style="margin-top: 0px; margin-bottom: 1em; padding: 0px; list-style-type: none; font-family: 'Courier New', monospace; font-size: 12px; width: 869.21875px; overflow: auto; color: rgb(51, 51, 51); line-height: 25px; background: rgb(247, 247, 247);"><%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
    <%@ include file="/common/taglibs.jsp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Insert title here</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="<c:url value="/pages/org/grid.treegrid.js"/>"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                jQuery("#treegrid").jqGrid({
                    treeGrid: true,
                    treeGridModel: 'adjacency', //treeGrid模式，跟json元數據有關 ,adjacency/nested
                    ExpandColumn : 'username',
                    scroll: "true",
                    url: '/pages/demo/tree1.json',
                    datatype: 'json',
                    colNames:['編號','姓名','密碼','年齡','地址','出生日期'],
                    colModel:[
                        {name:'id',index:'id', width:90,sorttype:"int"},
                        {name:'username',index:'username', width:110,sorttype:"int"},
                        {name:'password',index:'password', width:80},
                        {name:'age',index:'age', width:80},
                        {name:'address',index:'address', width:80},
                        {name:'time',index:'time', width:80,sorttype:"date"}
                    ],
                    pager: "false",
                    sortname: 'id',
                    sortorder: "desc",
    
                    jsonReader: {
                        root: "dataRows",
                        repeatitems : false
                    },
                    treeReader : {
                        level_field: "level",
                        parent_id_field: "parent",
                        leaf_field: "isLeaf",
                        expanded_field: "expanded"
                    },
                    caption: "jqGrid test",
                    mtype: "POST",
                    height: "auto",    // 設为具體數值則會根據實際記錄數出現垂直滾動條
                    rowNum : "-1",     // 顯示全部記錄
                    shrinkToFit:false  // 控制水平滾動條
                });
            });
        </script>
    
    </head>
    <body>
    <table id="treegrid"></table>
    </body>
    </html>