jqxTreeGrid

最新推荐文章于 2024-09-09 09:35:48 发布

weixin_30559481

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量199

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/xuerong/p/5733629.html

版权

基本TreeGrid样本

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">TreeGrid displaying JSON data</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">

  $(document).ready(function () {

var employees = 
[
    {
        "EmployeeID": 1,
        "FirstName": "Nancy",
        "LastName": "Davolio",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1992-05-01 00:00:00",
        "BirthDate": "1948-12-08 00:00:00",
        "City": "Seattle",
        "Address": "507 - 20th Ave. E.Apt. 2A"
    },
    {
        "EmployeeID": 2,
        "FirstName": "Andrew",
        "LastName": "Fuller",
        "ReportsTo": null,
        "Country": "USA",
        "Title": "Vice President, Sales",
        "HireDate": "1992-08-14 00:00:00",
        "BirthDate": "1952-02-19 00:00:00",
        "City": "Tacoma",
        "Address": "908 W. Capital Way"
    },
    {
        "EmployeeID": 3,
        "FirstName": "Janet",
        "LastName": "Leverling",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1992-04-01 00:00:00",
        "BirthDate": "1963-08-30 00:00:00",
        "City": "Kirkland",
        "Address": "722 Moss Bay Blvd."
    },
    {
        "EmployeeID": 4,
        "FirstName": "Margaret",
        "LastName": "Peacock",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1993-05-03 00:00:00",
        "BirthDate": "1937-09-19 00:00:00",
        "City": "Redmond",
        "Address": "4110 Old Redmond Rd."
    },
    {
        "EmployeeID": 5,
        "FirstName": "Steven",
        "LastName": "Buchanan",
        "ReportsTo": 2,
        "Country": "UK",
        "Title": "Sales Manager",
        "HireDate": "1993-10-17 00:00:00",
        "BirthDate": "1955-03-04 00:00:00",
        "City": "London",
        "Address": "14 Garrett Hill"
    },
    {
        "EmployeeID": 6,
        "FirstName": "Michael",
        "LastName": "Suyama",
        "ReportsTo": 5,
        "Country": "UK",
        "Title": "Sales Representative",
        "HireDate": "1993-10-17 00:00:00",
        "BirthDate": "1963-07-02 00:00:00",
        "City": "London",
        "Address": "Coventry House Miner Rd."
    },
    {
        "EmployeeID": 7,
        "FirstName": "Robert",
        "LastName": "King",
        "ReportsTo": 5,
        "Country": "UK",
        "Title": "Sales Representative",
        "HireDate": "1994-01-02 00:00:00",
        "BirthDate": "1960-05-29 00:00:00",
        "City": "London",
        "Address": "Edgeham Hollow Winchester Way"
    },
    {
        "EmployeeID": 8,
        "FirstName": "Laura",
        "LastName": "Callahan",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Inside Sales Coordinator",
        "HireDate": "1994-03-05 00:00:00",
        "BirthDate": "1958-01-09 00:00:00",
        "City": "Seattle",
        "Address": "4726 - 11th Ave. N.E."
    },
    {
        "EmployeeID": 9,
        "FirstName": "Anne",
        "LastName": "Dodsworth",
        "ReportsTo": 5,
        "Country": "UK",
        "Title": "Sales Representative",
        "HireDate": "1994-11-15 00:00:00",
        "BirthDate": "1966-01-27 00:00:00",
        "City": "London",
        "Address": "7 Houndstooth Rd."
    }
];

// prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'EmployeeID', type: 'number' },
                    { name: 'ReportsTo', type: 'number' },
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'Country', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'HireDate', type: 'date' },
                    { name: 'BirthDate', type: 'date' }
                ],
                hierarchy:
                {
                    keyDataField: { name: 'EmployeeID' },
                    parentDataField: { name: 'ReportsTo' }
                },
                id: 'EmployeeID',
                localData: employees
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create Tree Grid
            $("#treeGrid").jqxTreeGrid(
            {
                width: 500,
                source: dataAdapter,
                ready: function () {
                    $("#treeGrid").jqxTreeGrid('expandRow', '2');
                },
                columns: [
                  { text: 'FirstName', dataField: 'FirstName', width: 150 },
                  { text: 'LastName', dataField: 'LastName', width: 150 },
                  { text: 'Title', dataField: 'Title', width: 200 }
                ]
            });
        });

</script>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
</body>
</html>

$(document).ready(function () {
    isAll = false;
    var source ={
        dataType: "json",
        dataFields: [
            { name: 'dictCode', type: 'string' },
            { name: 'dictName', type: 'string' },
            { name: 'isEnumeration', type: 'string' },
            { name: 'isType', type: 'string' },
            { name : 'displayNo',type:'number'},
            { name : 'dictId',type:'string'},
            { name : 'enableFlag',type:'string'},
            { name : 'parentDictCode',type:'string'}],
        hierarchy:{
            keyDataField: { name: 'dictCode' },
            parentDataField: { name: 'parentDictCode' }
        },
        id: 'dictCode',
        localData: orgs
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    // create Tree Grid
    $("#treeGrid").jqxTreeGrid(

        {
            width: 850,
            source: dataAdapter,
            filterable: true,
            filterMode: 'simple',
            checkboxes: true,
            sortable: true,
            hierarchicalCheckboxes: true,
            ready: function()
            {
                $("#treeGrid").jqxTreeGrid('expandRow', '1');
            },
            columns: [

                { text: '字典类型名称', dataField: 'dictName'},
                { text: '字典类型编码', dataField: 'dictCode'},
                { text: '排序号', dataField: 'displayNo',
                    cellsRenderer: function (rowKey, dataField, value, data) {
                        if (value == null || "" == value) {
                            return "";
                        } else {
                            return value;
                        }
                    }},
                { text: '是否启用', dataField: 'enableFlag', width: 150,
   　　　　　　　　　　 cellsRenderer: function (rowKey, dataField, value, data) {
                        if (value == 0) {
                            return '<span class="label label-sm label-success arrowed arrowed-in">否</lable>';
                        } else {
                            return '<span class="label label-sm label-info arrowed arrowed-right">是</lable>';
                        }
                    }
                },
                { text: '操作', dataField: 'dictId', width: 350,
                    cellsRenderer: function (rowKey, dataField, value, data) {
                        var content = '<button  type="button"' + (($("#editAble").val() != undefined && $("#editAble").val() == "true") ? "" : " disabled ") + '  οnclick="editForm(\'' + value + '\')" class="btn btn-info btn-sm">编辑</button>';
                        content+= '<button style="margin-left:10px;"  type="button"' + (('' + data.isEnumeration + '' == "true") ? "" : " disabled ") + '  οnclick="findEnumeration(\'' + data.dictCode + '\');" class="btn btn-info btn-sm">查看枚举项</button>';
                        return content;
                    }
                }]

        });
    $("#treeGrid").jqxTreeGrid('expandAll');


    $("#filtertreeGrid .jqx-fill-state-normal").text("搜索");
    $(".jqx-widget-header.jqx-grid-toolbar div:first").text("字典类型名称").addClass("search_title");
    $("#wrappertreeGrid").parent().addClass("wrappertreeGrid_wrap");
    $(".jqx-grid-table tr").each(function(){$(this).find("td:last").addClass("cz");})
});

<script>
    var orgs = [];
    <c:forEach items="${dictList}" var="res">
    var res = {};
    res.dictCode = '${res.dictCode}';
    res.parentDictCode = '${res.parentDictCode}';
    res.dictName = '${res.dictName}';
    res.isType = '${res.isType}';
    res.displayNo = '${res.displayNo}';
    res.enableFlag = '${res.enableFlag}';
    res.dictId = '${res.dictId}';
    res.isEnumeration = '${res.isEnumeration}';
    orgs.push(res)
    </c:forEach>
</script>

转载于:https://www.cnblogs.com/xuerong/p/5733629.html

weixin_30559481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqxTreeGrid

基本TreeGrid样本 <!DOCTYPE html><html lang="en"><head> <title id="Description">TreeGrid displaying JSON data</title> <link rel="stylesheet" href="../...
复制链接

扫一扫