jQWidgets的TreeGrid 心得:

原创 2016年06月01日 17:42:53

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 plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6. <head>  
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  8. <c:set scope="page" var="path" value="${pageContext.request.contextPath}"></c:set>  
  9. <title>事项列表</title>  
  10.  <link rel="stylesheet" href="${path}/js/jq/jqwidgets/styles/jqx.base.css" type="text/css" />  
  11.     <script type="text/javascript" src="${path}/js/jq/scripts/jquery-1.11.1.min.js"></script>  
  12.     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxcore.js"></script>  
  13.     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxdata.js"></script>  
  14.     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxbuttons.js"></script>  
  15.     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxscrollbar.js"></script>  
  16.     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxdatatable.js"></script>  
  17.     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxtreegrid.js"></script>  
  18.     <script type="text/javascript" src="${path}/js/jq/scripts/demos.js"></script>  
  19.     <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxtabs.js"></script>  
  20.      <script type="text/javascript" src="${path}/js/jq/jqwidgets/jqxinput.js"></script>  
  21.     <style>  
  22.         .jqx-tree-grid-icon, .jqx-tree-grid-icon-size {  
  23.             vertical-align:middle;  
  24.             margin-top:4px;  
  25.             width: 17px;  
  26.             height: 22px;  
  27.         }  
  28.         .jqx-tree-grid-title, .jqx-tree-grid-collapse-button, .jqx-tree-grid-expand-button {  
  29.             height: 30px;  
  30.             line-height: 40px;  
  31.         }  
  32.     </style>  
  33.     <script type="text/javascript">  
  34.         $(document).ready(function () {  
  35.         //var employeeAll=${tbizlist};  
  36.         var employees= ${xzxk};  
  37.         var source =  
  38.             {  
  39.                 dataType: "json",  
  40.                 dataFields: [  
  41.                     { name: 'fbizid', type: 'string' },  
  42.                     { name: 'reportsTo', type: 'string' },  
  43.                     { name: 'fdispname', type: 'string' },  
  44.                     { name: 'fzgdw', type: 'string' },  
  45.                     { name: 'forder', type: 'int' },  
  46.                     { name: 'childTbizSet', type: 'string' },  
  47.                     { name: 'fisbiz', type: 'string' },  
  48.                     { name: 'fname', type: 'string' }  
  49.                 ],  
  50.                 hierarchy:  
  51.                 {  
  52.                     keyDataField: { name: 'fbizid' },  
  53.                     parentDataField: { name: 'reportsTo' }  
  54.                 },  
  55.                 id: 'fbizid',  
  56.                 localData: employees  
  57.             };  
  58.             var dataAdapter = new $.jqx.dataAdapter(source, {  
  59.                 beforeLoadComplete: function (records) {  
  60.                 console.log(records);  
  61.                     for (var i = 0; i < records.length; i++) {  
  62.                         //records[i].fdispname="<a href='http://www.qq.com?b="+records[i].fdispname+"'>"+records[i].fdispname+"</a>";  
  63.                         var imgUrl;  
  64.                         if(records[i].childTbizSet.length==0){  
  65.                             imgUrl'${path}/image/ty.png';  
  66.                             records[i].icon=imgUrl;  
  67.                             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>";  
  68.                             records[i].fdispname="<a href='${path}/online/tbizHelps/"+records[i].fname+"/list'>"+records[i].fdispname+"</a>";  
  69.                         }else {  
  70.                             imgUrl = '${path}/image/tt.png';  
  71.                             records[i].icon=imgUrl;  
  72.                                 records[i].fisbiz ="";  
  73.                         }  
  74.                     }  
  75.                     return records;  
  76.                 }  
  77.             }  
  78.             );  
  79.             // create Tree Grid1  
  80.             $("#treeGrid").jqxTreeGrid(  
  81.             {  
  82.                 width: '99%',  
  83.                 source: dataAdapter,  
  84.                 sortable: true,  
  85.                 icons: true,  
  86.                 pageable: true,  
  87.                 ready: function () {  
  88.                     $("#treeGrid").jqxTreeGrid('expandRow', '2');  
  89.                 },  
  90.                 columns: [  
  91.                   { text: '服务事项名称', dataField: 'fdispname', width: 600 },  
  92.                   //{ text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },  
  93.                   { text: '主管单位', dataField: 'fzgdw', width: 250 ,cellsalign:'center'},  
  94.                     
  95.                   { text: '操作', dataField: 'fisbiz',cellsalign:'center' }  
  96.                 ]  
  97.                // ,  
  98.                // columnGroups: [  
  99.                //     { text: 'Name', name: 'Name' }  
  100.                // ]  
  101.             });  
  102.     </script>  
  103. </head>  
  104. <body class='default'>  
  105.                 <div>  
  106.                     <div id="treeGrid" style="margin-left: 4px"></div>  
  107.                 </div>  
  108. </body>  
  109. </html>  
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hdchenyue/article/details/51557773

jqxtreegrid使用方式

首先,这几天一直在使用jquery相关的组件,遇到很多问题。 当你的jsp或html页面中使用多个jquery相关的组件时,只引用一个jquery的js文件即可。本人就是因为同一个页面中引入...
  • ZRRJDD
  • ZRRJDD
  • 2017-03-28 17:29:08
  • 1844

jQwidgets导出能参数,url说明

$("#jqxGrid").jqxGrid('exportdata', 'xls', 'jqxGrid', true, null, true, url); jQwidgets导出能参数,url说明 ...
  • u010730458
  • u010730458
  • 2015-07-16 15:15:28
  • 1480

jQWidgets的TreeGrid 心得:

1.下载 jQWidgets 的包,加载到项目。 2.在项目中找到demos/jqxtreegrid​/JavaScript-tree-grid-icons.htm ,打开相应的html,看源代...
  • hdchenyue
  • hdchenyue
  • 2016-06-01 17:42:53
  • 1614

用FlexGrid的EnterCell方法来实现控件可编辑

     在MSFLEXGRID控件中每一个CELL格的内容是不可以由用户直接编辑的但是我们可以通过一些小技巧来方便的实现这编辑功能来扩展MSFLEXGRID的应用(在实际应用中这是很常用的功能)。 ...
  • tomkai
  • tomkai
  • 2004-08-12 08:52:00
  • 1828

jqxGrid自定义行编辑器

jqwidgets jqxgrid行编辑自定义编辑器,子表详情表行编辑
  • csdn_ljh
  • csdn_ljh
  • 2016-03-14 20:05:07
  • 1581

【jQwidgets】jqxGrid 绑定格式化

var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties) { if ((row ...
  • u010730458
  • u010730458
  • 2014-12-03 10:18:32
  • 3834

jqWidgets之jqxComboBox级联

一级为省份二级为主机,当选择省份时二级无法指定默认选项 现象:输出二级选项的选择索引为-1,在初始化时指定了selectIndex为0 原因:二级菜单在一步请求时数据还没加载完所以指定的选项失效,再获...
  • xsl_1126571587
  • xsl_1126571587
  • 2015-12-08 18:07:59
  • 1176

asp.net MVC使用treegrid——jqwidgets插件

jqwidgets官网  http://www.jqwidgets.com 官网是全英文的,暂时还不支持中文,但是本地化里面竟然有日文的,这让我很想不通。中国这么大的市场为啥不做?不说废话了,下面开...
  • jsrgckf
  • jsrgckf
  • 2017-06-17 22:17:29
  • 359

jqwidgets之jqxGrid后台分页排序过滤

jqwidgets jqxgrid分页参数排序参数过滤参数 表格创建 默认排序 无法下一页
  • csdn_ljh
  • csdn_ljh
  • 2016-03-06 21:13:17
  • 2637

jqwidgets一个强大的jquery组件库

  • 2013年03月11日 11:20
  • 3.9MB
  • 下载
收藏助手
不良信息举报
您举报文章:jQWidgets的TreeGrid 心得:
举报原因:
原因补充:

(最多只允许输入30个字)