jqxtreegrid使用方式

首先，这几天一直在使用jquery相关的组件，遇到很多问题。
当你的jsp或html页面中使用多个jquery相关的组件时，只引用一个jquery的js文件即可。本人就是因为同一个页面中引入了多个jquery.js,页面中的代码不知道使用哪一个版本的jquery，所以可能只有一个组件能正常显示，其他组件不能正常显示。
接下来给大家简单的介绍一个jqxtreegird组件。
这个组件是一个轻量级的jquery组件，它以树形状结构表示数据。树形网格（也称为树列表）也支持分层数据，数据分页，排序和过滤，数据编辑，列调整大小，固定列，条件格式化，聚合和行选择的多列显示。它可以读取和显示来自数据源（如XML，JSON，Array，CSV或TSV）的数据。jqxTreeGrid具有直观易用的API，可以跨设备和浏览器进行工作。
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/index.htm 这是官网地址。

接下来直接给大家上代码：

首先引入相关的jqxtreegrid 相关的 js 和 css文件。

<link rel="stylesheet" href="${pageContext.request.contextPath}/static/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jqwidgets/jqwidgets/jqxcore.js"></script>
<script type = "text/javascript" 
src="${pageContext.request.contextPath}/static/jqwidgets/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jqwidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jqwidgets/jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jqwidgets/jqwidgets/jqxtreegrid.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jqwidgets/scripts/demos.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jqwidgets/demos/sampledata/generatedata.js"></script>

2.在html中写一个div

<div id="treeGrid"></div>

3.接下来需要写js代码

$(document)
            .ready(
                    function() {
                        //这里本人获取屏幕的宽度
                        var winWidth = 0;

                        if (window.innerWidth) {
                            winWidth = window.innerWidth;
                        } else if ((document.body)
                                && (document.body.clientWidth))
                            winWidth = document.body.clientWidth;

                        winWidth = winWidth - 100;
                        /**
                            下边这一句是获取json数据。本人使用了一个笨方法。
                            在controller方，将要显示的数据装换成json数据，
                            然后放到request域对象中，在jsp页面上使用
                            <input type="hidden" id="t2" value='${tasksStr }'>
                            来接收的数据，然后又通过jquery来获取的。如果大家有什么好的方法，可以私下联系我。
                        */
                        var jsonData = $("#t2").val();


                        // 准备数据
                        var source = {
                            dataType : "json", //json格式
                            //dataFields定义的是数据属性名称及对应的数据类型。
                            // 数据属性的名称对应的json数据中的属性名称
                            dataFields : [ {
                                name : "content",
                                type : "string"
                            }, {
                                name : "createDate",
                                type : "date"
                            }, {
                                name : "createByName",
                                type : "string"
                            }, {
                                name : "replys",  //这是一个数组，相当于树的下一级的集合
                                type : "array"
                            }, {
                                name : "operate", //操作，删除，修改，等
                                type : "string"
                            }, {
                                name : "id",
                                type : "string"
                            }],
                            //设置数的层次
                            hierarchy : {
                                root : 'replys'
                            },
                            id : 'id',
                            //加载的数据
                            localData : jsonData
                        };
                        //用来生成jqxtreegrid需要的数据格式
                        var dataAdapter = new $.jqx.dataAdapter(
                                source,
                                {
                                    /**
                                    *这个方法很重要，表示在加载之前的动作，records是json格式的数据，
                                    * 因为从数据库获取的数据没有操作属性值，下边就是动态的添加
                                    */
                                    beforeLoadComplete : function(records) {
                                        for (var i = 0; i < records.length; i++) {

                                            records[i].content = "<a href='${ctx}/invest/task/form?id="
                                                    + records[i].id
                                                    + "'>"
                                                    + records[i].content
                                                    + "</a>";

                                            //添加操作
                                            records[i].operate = "<a href='${ctx}/invest/task/delete?id="
                                                    + records[i].id
                                                    + "' onclick='return confirmx(确认要删除该任务吗？, this.href)'>删除</a>"
                                                    +"&nbsp;&nbsp;<a  href='${ctx}/invest/taskDetail/list?task.id="
                                                    + records[i].id
                                                    + "'>查看明细</a>"
                                                    + "&nbsp;&nbsp;<a href='${ctx}/invest/reply/form?taskId="
                                                    + records[i].id
                                                    + "'>添加回复</a>";

                                            if (records[i].replys != ""
                                                    && records[i].replys != null) {
                                                for (var j = 0; j < records[i].replys.length; j++) {
                                                    records[i].replys[j].operate = "<a  href='${ctx}/invest/reply/form?id="
                                                            + records[i].replys[j].id+"&taskId="+records[i].id
                                                            + "'>修改</a>"
                                                            + "&nbsp;&nbsp;<a href='${ctx}/invest/reply/delete?id="
                                                            + records[i].replys[j].id
                                                            + "' onclick='return confirmx(确认要删除该任务吗？, this.href)'>删除</a>";
                                                }
                                            }

                                        }
                                        return records;
                                    }
                                });

                        // 创建一个树网络
                        $("#treeGrid").jqxTreeGrid({
                            width : winWidth,
                            source : dataAdapter,//相当于数据源
                            sortable : true,//是否排序
                            altRows: true,
                            enableHover: true,
                            rowDetails: false,
                            pageable : true,  //是否分页
                            pagerMode : 'advanced',
                            pagerPosition : 'bottom',
                            pageSizeMode : 'root',
                            pageSize : 30,
                            pageSizeOptions : [ 10, 20, 30 ], 
                            ready : function() {
                                $("#treeGrid").jqxTreeGrid('expandRow', '1');
                            },
                            columns : [ {
                                text : '任务内容',
                                dataField : "content",
                                align : 'center',
                                width : winWidth-500
                            }, {
                                text : '发表时间',
                                dataField : "createDate",
                                cellsFormat : 'yyyy-MM-dd hh:mm',
                                align : 'center',
                                width : 200
                            }, {
                                text : '发布人',
                                dataField : "createByName",
                                align : 'center',
                                width : 100
                            }, {
                                text : '操作',
                                dataField : "operate",
                                align : 'center',
                                width : 200
                            } ]
                        });
                    });