jQWidgets的TreeGrid 心得:
来源:互联网 发布:淘宝促销源码 编辑:程序博客网 时间:2024/04/30 22:17
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>
0 0
- jQWidgets的TreeGrid 心得:
- jQWidgets的TreeGrid 心得:
- 树形表格treegrid的使用心得
- asp.net MVC使用treegrid——jqwidgets插件
- jqwidgets 简单的知识
- treeGrid的使用方法
- TreeGrid的属性介绍
- ExtJS TreeGrid的用法
- easyUI treegrid的使用
- 二 TreeGrid的绑定
- EasyUI的TreeGrid应用
- easyui-treegrid的案例
- 可拖拽的easyui treegrid
- easyui的treegrid
- treegrid
- ExtJS4.2 TreeGrid 的用法
- jqGrid的树形表格:treeGrid
- 生成树(treegrid)的数据格式
- Linux 网络编程——原始套接字实例:MAC 地址扫描器
- 三网融合
- 友盟分析统计实现
- POJ1609:Tiling Up Blocks(DP)
- io Object流
- jQWidgets的TreeGrid 心得:
- 黑马程序员——面向对象
- 欢迎使用CSDN-markdown编辑器
- ThreadLocal-分析-总结
- Hadoop 2.2.0和HBase 0.98.11伪分布式
- Ueditor上传配置
- MySQL_GUI_Tools可视化工具的使用!!
- RAC-DG1-DG2 切换
- 非负矩阵分解NMF