EasyUITreeGridMasterFile（EasyUITree大数据量一次性加载）

EasyUITreeGridMasterFile（EasyUITree大数据量一次性加载）

关于后台数据存储将集中在最后一篇讲解，此处省略

<%@ Page Language="C#" MasterPageFile="~/pages/master/WebList.Master" AutoEventWireup="true"
    CodeBehind="EasyUITreeGridMasterFile.aspx.cs" Inherits="BF.Web.pages.MedicalTreatmentCombination.EasyUITreeGridMasterFile" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceJs" runat="server">
    <link href="EasyUI-Tree_v3-master/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="EasyUI-Tree_v3-master/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="EasyUI-Tree_v3-master/demo.css" rel="stylesheet" type="text/css" />
    <script src="EasyUI-Tree_v3-master/jquery.min.js" type="text/javascript"></script>
    <script src="EasyUI-Tree_v3-master/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function loadData() {
            //debugger;
            $.ajax({
                async: false, //【重要】：设置false不然出不来数据
                type: "post", //要用post方式                 
                url: "ZtreeForm.aspx/GetTreeList", //方法所在页面和方法名
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) { //请求成功后处理函数。
                    var _data = $.parseJSON(data.d);
                    $('.easyui-treegrid').treegrid("loadData", _data);
                    $('.easyui-treegrid').treegrid("expandAll");
                    //$('.easyui-tree').treegrid("expandAll");
                },
                error: function () {//请求失败处理函数
                    alert('请求失败');
                },
                beforeSend: function () {
                },
                complete: function () {
                }
            });
        }



        var startTime = new Date(), endTime = 0;
        $(function () {
            $('.easyui-treegrid').treegrid({
                animate: true, //定义节点在展开或折叠的时候是否显示动画效果。 默认值：false
                //checkbox: true, //定义是否在每一个借点之前都显示复选框。 默认值：false
                //cascadeCheck: true, //定义是否层叠选中状态。 默认值：true
                //onlyLeafCheck: false, //定义是否只在末级节点之前显示复选框。 默认值：false
                fit: true,
                lines: false, //定义是否显示树控件上的虚线。 默认值：false
                //dnd: false, //定义是否启用拖拽功能。 默认值：false
                idField: 'id', //绑定节点的标识值。
                treeField: 'text', //显示的节点文本。
                columns: [[
                            { title: '地区名称', field: 'text', width: 180, align: 'right' },
                            { title: '地区编码', field: 'sAreaCode', width: 180, align: 'right' },
                            { title: '地区级别', field: 'iJB', width: 120, align: 'right' },
                            { title: '创建日期', field: 'dCreateDate', width: 120, align: 'center' },
                            { title: '创建人编码', field: 'gCreateUserId', width: 250, align: 'right' },
                            { title: '创建人姓名', field: 'sCreateUserRealname', width: 120, align: 'right' },
                            { title: '修改日期', field: 'dModifyDate', width: 120, align: 'center' },
                            { title: '修改人编码', field: 'gModifyUserId', width: 250, align: 'right' },
                            { title: '修改人姓名', field: 'sModifyUserRealname', width: 120, align: 'right' }
                            ]]
                //queryParams: "", //在请求远程数据的时候增加查询参数并发送到服务器。（该属性自1.4版开始可用） 默认值：{}
                //formatter: null, //定义如何渲染节点的文本。 默认值：false
                //filter: null, //定义如何过滤本地展示的数据，返回true将允许节点进行展示。（该属性自1.4.2版开始可用） 默认值：json loader
                /*loader: null, 定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数：
                *param：发送到远程服务器的参数对象。
                *success(data)：当检索数据成功的时候调用的回调函数。
                *error()：当检索数据失败的时候调用的回调函数。 默认值：json loader
                */
                /*loadFilter: null, 
                *返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数：
                *data：加载的原始数据。
                *parent: DOM对象，代表父节点。 默认值：
                */
            });
            loadData();
            endTime = new Date();
            var usedTime = (endTime.getTime() - startTime.getTime()) / 1000;
            showLog("加载完毕，异步加载, 耗时：" + usedTime + " 秒");
        });


        function getTime() {
            var now = new Date(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds(),
            ms = now.getMilliseconds();
            return (h + ":" + m + ":" + s + " " + ms);
        }

        function showLog(str) {
            var log = $("#log");
            log.append("<li>" + str + "</li>");
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHtml" runat="server">
    <div style="margin: 20px 0;">
    </div>
    <div class="easyui-panel" style="padding: 5px">
        <ul class="easyui-treegrid" style="width: 700px; height: 250px">
        </ul>
        <ul id="log" class="log" style="height: 85px">
        </ul>
    </div>
</asp:Content>

【EasyUITreeGridMasterFile（EasyUITree大数据量一次性加载）】