jQWidgets的TreeGrid 心得：

最新推荐文章于 2020-12-16 10:37:23 发布

c人生的旅途

最新推荐文章于 2020-12-16 10:37:23 发布

阅读量2.3k

点赞数

分类专栏： TreeGrid

本文链接：https://blog.csdn.net/hdchenyue/article/details/51557773

版权

TreeGrid 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.下载 jQWidgets 的包，加载到项目。

2.在项目中找到demos/jqxtreegrid/JavaScript-tree-grid-icons.htm ,打开相应的html,看源代码，修改代码依赖的js文件路径，应用到你的项目中来。

3.构造treegrid 需要，数据源source对象，属性dataType是数据类型，比如json，dataFields是数据对象中有的字段，hierarchy是指定用那个字段来构造父子关系，第一个参数为字段是id，第二字段指向字段reportsTo，比如对象中的reportsTo属性指向另外一个对象id，说明被指对象是其父对象。 localData是json格式的动态数据源，也就是项目中需要的动态数据。

4. $.jqx.dataAdapter（source，{}）；这个对象是可以treegrid加载前进行表格的设置，例如何以单元格中，可以设置图片，可以加载链接，等点击链接后跳转传递数据。

5.$('#treeGrid').jqxTreeGrid({}）；是从页面id为treeGrid的div,里创建treegrid，其中基本的宽度，dataAdapter对象，接下来可设置可否显示图片icon为true，sortable排序，columnGroups表格可拆分设计，pageable分页

[html]view plaincopy 
   
 <%@ page language="java" contentType="text/html; charset=utf-8"  
     pageEncoding="UTF-8"%>  
 <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <c:set scope="page" var="path" value="${pageContext.request.contextPath}"></c:set>  
 <title>事项列表</title>  
  <link rel="stylesheet" href="${path}/js/jq/jqwidgets/styles/jqx.base.css" type="text/css" />  
     <script type="text/javascript" src="${path}/js/jq/scripts/jquery-1.11.1.min.js"></script>  
     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxcore.js"></script>  
     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxdata.js"></script>  
     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxbuttons.js"></script>  
     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxscrollbar.js"></script>  
     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxdatatable.js"></script>  
     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxtreegrid.js"></script>  
     <script type="text/javascript" src="${path}/js/jq/scripts/demos.js"></script>  
     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxtabs.js"></script>  
      <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxinput.js"></script>  
     <style>  
         .jqx-tree-grid-icon, .jqx-tree-grid-icon-size {  
             vertical-align:middle;  
             margin-top:4px;  
             width: 17px;  
             height: 22px;  
         }  
         .jqx-tree-grid-title, .jqx-tree-grid-collapse-button, .jqx-tree-grid-expand-button {  
             height: 30px;  
             line-height: 40px;  
         }  
     </style>  
     <script type="text/javascript">  
         $(document).ready(function () {  
         //var employeeAll=${tbizlist};  
         var employees= ${xzxk};  
         var source =  
             {  
                 dataType: "json",  
                 dataFields: [  
                     { name: 'fbizid', type: 'string' },  
                     { name: 'reportsTo', type: 'string' },  
                     { name: 'fdispname', type: 'string' },  
                     { name: 'fzgdw', type: 'string' },  
                     { name: 'forder', type: 'int' },  
                     { name: 'childTbizSet', type: 'string' },  
                     { name: 'fisbiz', type: 'string' },  
                     { name: 'fname', type: 'string' }  
                 ],  
                 hierarchy:  
                 {  
                     keyDataField: { name: 'fbizid' },  
                     parentDataField: { name: 'reportsTo' }  
                 },  
                 id: 'fbizid',  
                 localData: employees  
             };  
             var dataAdapter = new $.jqx.dataAdapter(source, {  
                 beforeLoadComplete: function (records) {  
                 console.log(records);  
                     for (var i = 0; i < records.length; i++) {  
                         //records[i].fdispname="<a href='http://www.qq.com?b="+records[i].fdispname+"'>"+records[i].fdispname+"</a>";  
                         var imgUrl;  
                         if(records[i].childTbizSet.length==0){  
                             imgUrl= '${path}/image/ty.png';  
                             records[i].icon=imgUrl;  
                             records[i].fisbiz ="<a href='${path}/online/tbizrecs/bef/list/"+records[i].fdispname+"/"+records[i].fisbiz+"/"+records[i].fname+"/"+records[i].fbizid.toString()+"'><img alt='' src='${path}/image/one.png'></a>";  
                             records[i].fdispname="<a href='${path}/online/tbizHelps/"+records[i].fname+"/list'>"+records[i].fdispname+"</a>";  
                         }else {  
                             imgUrl = '${path}/image/tt.png';  
                             records[i].icon=imgUrl;  
                                 records[i].fisbiz ="";  
                         }  
                     }  
                     return records;  
                 }  
             }  
             );  
             // create Tree Grid1  
             $("#treeGrid").jqxTreeGrid(  
             {  
                 width: '99%',  
                 source: dataAdapter,  
                 sortable: true,  
                 icons: true,  
                 pageable: true,  
                 ready: function () {  
                     $("#treeGrid").jqxTreeGrid('expandRow', '2');  
                 },  
                 columns: [  
                   { text: '服务事项名称', dataField: 'fdispname', width: 600 },  
                   //{ text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },  
                   { text: '主管单位', dataField: 'fzgdw', width: 250 ,cellsalign:'center'},  
                     
                   { text: '操作', dataField: 'fisbiz',cellsalign:'center' }  
                 ]  
                // ,  
                // columnGroups: [  
                //     { text: 'Name', name: 'Name' }  
                // ]  
             });  
     </script>  
 </head>  
 <body class='default'>  
                 <div>  
                     <div id="treeGrid" style="margin-left: 4px"></div>  
                 </div>  
 </body>  
 </html>  

c人生的旅途

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQWidgets的TreeGrid 心得：

1.下载 jQWidgets 的包，加载到项目。2.在项目中找到demos/jqxtreegrid/JavaScript-tree-grid-icons.htm ,打开相应的html,看源代码，修改代码依赖的js文件路径，应用到你的项目中来。3.构造treegrid 需要，数据源source对象，属性dataType是数据类型，比如json，dataFields是数据对象中有的
复制链接

扫一扫