jqGrid的樹形表格：treeGrid

最新推荐文章于 2023-07-03 22:00:00 发布

赶路人儿

最新推荐文章于 2023-07-03 22:00:00 发布

阅读量3.4k

点赞数

分类专栏： web前端

web前端专栏收录该内容

294 篇文章

订阅专栏

本文介绍如何使用jqGrid插件实现树状表格功能，包括两种不同JSON数据格式的处理方式及对应的JSP页面配置。通过示例展示了如何设置treeGrid参数以正确展示层级数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一個列子
/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>