jQWidgets的TreeGrid 心得:
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分页
- <%@ 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>
jQWidgets的TreeGrid 心得:相关推荐
- 如何去掉jQWidgets中TreeGrid和Grid右下角的链接
关于如何去掉这个水印,这是官方的说法. 更新了jQWidgets版本,发现在使用过程中发现每次渲染完TreeGrid和Grid后会在表格右下角出现一个www.jqwidgets.com的span标签. ...
- treegrid 的使用介绍
最近在项目开发中使用easyuide treegrid插件,下面将结合项目来介绍下自己的使用心得. 使用到treegrid插件的是权限管理模块,主要功能还是crud,首先在使用easyui时要引入相应 ...
- Java EE学习心得
–Java EE学习心得 1. 称为编程专家的秘诀是: 思考-----编程--------思考------编程--.. 编程不能一步到位,不能一上来就编,必须先思考如何写,怎样写?然后再编程 ...
- 测试心得:微图书销售小程序
测试心得:微图书销售小程序 前言 这个学期差不多也将近结束,经过大半个学期,从项目需求的确认和项目文档的编写,到一步步的设计与实现,现在终于到了测试阶段,但是我们在测试阶段也暴露出了很多bug,但是每 ...
- java.lang.OutOfMemoryError:GC overhead limit exceeded填坑心得
该文章出自:http://www.cnblogs.com/hucn/p/3572384.html 分析工具:http://www.blogjava.net/jjshcc/archive/2014/03 ...
- 计算机财务应用实验心得,计算机会计实习心得-20210628124643.doc-原创力文档
计算机会计实习心得 计算机会计实习心得1 毕业实践环节是大学生在完成全部课程后.走向社会之前最真实的一个模拟实验,对于我们财会专业的学生,平时注意注重理论学习,缺乏实践锻炼,因此实习显得尤为重要.在本 ...
- html5考试总结300字,期中考心得300字5
为了检验学生半个学期所学的知识而进行的一次考试,有利于学生比较正式地检验自己平时的学习水平,根据这个成绩,学生可以及时的调整学习心态和方法,更有效率地进行下一阶段的学习,期中考试主要考察学生前半学期的 ...
- Assembly学习心得
http://blog.csdn.net/etmonitor/ Assembly学习心得 说明: 最近开始准备把学到的.NET知识重新整理一遍,眼过千遍不如手过一遍,所以我准备记下我的学习心得,已备参 ...
- 什么叫安装文件索引服务器,搜出精彩 玩转Windows 2008系统心得
[IT168 专稿]不少朋友已经在不经意间与Windows Server 2008系统进行了亲密接触,在一段时间的接触之后,不知大家对该系统的文件搜索功能会有什么样的体会?其实,Windows Ser ...
- mysql主从数据库含义_(转)Mysql数据库主从心得整理
管理mysql主从有2年多了,管理过200多组mysql主从,几乎涉及到各个版本的主从,本博文属于总结性的,有一部分是摘自网络,大部分是根据自己管理的心得和经验所写,整理了一下,分享给各位同行,希望对 ...
最新文章
- Sql Server系列:触发器
- 【CodeVS1080】线段树练习
- Struts 声明式异常处理和个性化异常处理(转)
- ios 容错处理JKDataHelper和AvoidCrash
- JavaWeb学习之路——jsp与serverlet(一)
- Intelij IDEA 常用快捷键
- 硬解析和软解析 mysql_Oracle学习之shared pool--硬解析和软解析
- mysql课程表学时_Mysql 巩固提升 (学生表_课程表_成绩表_教师表)
- bat中文乱码_详解Windows下获取时间bat脚本总结,值得收藏
- 深入V8引擎-Time核心方法之mac篇
- 【2021牛客暑期多校训练营5】Jewels(建图,最小匹配权,KM乱搞)
- html未找到音频文件夹,【已解决】html5中MediaRecorder的dataavailable没有执行获取不到录音数据...
- qq企业邮箱的发送邮件服务器地址,腾讯企业邮箱注册和SMTP发件设置教程
- 计算机怎么格式化硬盘,电脑格式化硬盘 电脑格式化硬盘要怎么操作
- Cinnamon 任务栏网速绘制内存和CPU使用率竖线
- [渝粤教育] 浙江大学 2021秋 茶叶加工与品质管理学Ⅰ 陈萍 章节答案考试答案 浙江大学[渝粤教育]
- 【Codeforces】1051F. The Shortest Statement【MST+LCA+最短路】
- 左边是地狱右边也是地狱_走出教程地狱
- Js与Jq实战:第二讲:JavaScript基础
- Linux下同一个Tomcat部署多个项目不同端口访问
热门文章
- 【数据库CS751】数据库各种连接的理解(包括自然连接,内连接,外连接)
- android homme2016款,#攻势来袭#Android Homme 2016 x DEAL线下预定全面开启
- [油猴脚本] 知乎免广告
- 郑捷《机器学习算法原理与编程实践》学习笔记(第七章 预测技术与哲学)7.2 径向基网络...
- 30 行代码实现蚂蚁森林自动收能量
- 电脑锁屏壁纸提取方法
- JavaScript基础-数组
- 有线路由器加无线路由器WAN接LAN和LAN接LAN的连线方法
- 《从Paxos到Zookeeper分布式一致性原理与实践》读书笔记
- 嵌入式linux locale,总结!嵌入式linux基础学习笔记