支持IE6的树形节结构TreeTable实际应用案例
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.treeTable.js" type="text/javascript"></script>
<link href="default/jquery.treeTable.css" rel="stylesheet" type="text/css" />
<table id="treeTable">
<tr id="43" pid="0" department_id="43">
<td>
<input type="checkbox" value="43" /><img src="default/jinghui.png" />大安
</td>
</tr>
<tr id="7" pid="43" manage_id="7">
<td>
<input type="checkbox" value="7" /><img src="default/jingyuan.png" />测试
</td>
</tr>
<tr id="5" pid="43" manage_id="5">
<td>
<input type="checkbox" value="5" /><img src="default/jingyuan.png" />张警官
</td>
</tr>
<tr id="47" pid="0" department_id="47">
<td>
<input type="checkbox" value="47" /><img src="default/jinghui.png" />自贡市公安局
</td>
</tr>
<tr id="4" pid="47" manage_id="4">
<td>
<input type="checkbox" value="4" /><img src="default/jingyuan.png" />管理员
</td>
</tr>
<tr id="50" pid="47" department_id="50">
<td>
<input type="checkbox" value="50" /><img src="default/jinghui.png" />信息中心
</td>
</tr>
<tr id="48" pid="47" department_id="48">
<td>
<input type="checkbox" value="48" /><img src="default/jinghui.png" />自贡公安局指挥中心
</td>
</tr>
<tr id="49" pid="48" department_id="49">
<td>
<input type="checkbox" value="49" /><img src="default/jinghui.png" />招生办
</td>
</tr>
<tr id="9" pid="49" manage_id="9">
<td>
<input type="checkbox" value="9" /><img src="default/jingyuan.png" />赵警官
</td>
</tr>
<tr id="46" pid="0" department_id="46">
<td>
<input type="checkbox" value="46" /><img src="default/jinghui.png" />沿滩
</td>
</tr>
<tr id="45" pid="0" department_id="45">
<td>
<input type="checkbox" value="45" /><img src="default/jinghui.png" />富顺
</td>
</tr>
<tr id="8" pid="45" manage_id="8">
<td>
<input type="checkbox" value="8" /><img src="default/jingyuan.png" />富顺用户
</td>
</tr>
<tr id="39" pid="0" department_id="39">
<td>
<input type="checkbox" value="39" /><img src="default/jinghui.png" />贡井
</td>
</tr>
<tr id="6" pid="39" manage_id="6">
<td>
<input type="checkbox" value="6" /><img src="default/jingyuan.png" />贡井用户
</td>
</tr>
<tr id="38" pid="0" department_id="38">
<td>
<input type="checkbox" value="38" /><img src="default/jinghui.png" />自流井
</td>
</tr>
</table>
<script type="text/javascript">
$(function () {
var option = {
expandLevel: 6, //默认展开的层次
beforeExpand: function ($treeTable, id) {
//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
if ($('.' + id, $treeTable).length) { return; }
//这里的html可以是ajax请求
var html = ''; $treeTable.addChilds(html);
},
onSelect: function ($treeTable, id) {
window.console && console.log('onSelect:' + id); } };
$('#treeTable').treeTable(option); /* START 修改时绑定部门*/
$("#treeTable tr[department_id]").each(function () { if ($("#HF_departs_edit").val() != "") {
var departs1 = $("#HF_departs_edit").val().substr(0, $("#HF_departs_edit").val().length - 1).split('|');
for (var j = 0; j < departs1.length; j++) {
if (departs1[j] == $(this).find("input[type=checkbox]").val()) {
$(this).find("input[type=checkbox]").attr("checked", "checked");
}
}
}
});
/* END 修改时绑定部门*/
/* START 修改时绑定人员*/
$("#treeTable tr[manage_id]").each(function () { if ($("#HF_managers_edit").val() != "") {
var managers1 = $("#HF_managers_edit").val().substr(0, $("#HF_managers_edit").val().length - 1).split('|');
for (var j = 0; j < managers1.length; j++) {
if (managers1[j] == $(this).find("input[type=checkbox]").val()) {
$(this).find("input[type=checkbox]").attr("checked", "checked");
}
}
}
});
/* END 修改时绑定人员*/
$('#treeTable').click(function () {
var departs = "";
var managers = "";
$("#treeTable tr[department_id] td input[type=checkbox]").each(function () {
if ($(this).prop('checked') == true) {
departs += $(this).val() + "|";
alert(departs)
}
$("#HF_departs").val(departs);
}); //获取选中部门的值 $("#treeTable tr[manage_id] td input[type=checkbox]").each(function () {
if ($(this).prop('checked') == true) {
managers += $(this).val() + "|";
}
$("#HF_managers").val(managers);
}); //获取选中人员的值
}); }); </script>
<input type="hidden" name="HF_departs" id="HF_departs" />
<input type="hidden" name="HF_managers" id="HF_managers" />
<input type="hidden" name="HF_departs_edit" id="HF_departs_edit" />
<input type="hidden" name="HF_managers_edit" id="HF_managers_edit" />
实际为：
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.treeTable.js" type="text/javascript"></script>
<link href="default/jquery.treeTable.css" rel="stylesheet" type="text/css" />
<%=zNodes %>
<script type="text/javascript">
$(function () {
var option = {
expandLevel: 6, //默认展开的层次
beforeExpand: function ($treeTable, id) {
//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
if ($('.' + id, $treeTable).length) { return; }
//这里的html可以是ajax请求
var html = ''; $treeTable.addChilds(html);
},
onSelect: function ($treeTable, id) {
window.console && console.log('onSelect:' + id); } };
$('#treeTable').treeTable(option); /* START 修改时绑定部门*/
$("#treeTable tr[department_id]").each(function () { if ($("#HF_departs_edit").val() != "") {
var departs1 = $("#HF_departs_edit").val().substr(0, $("#HF_departs_edit").val().length - 1).split('|');
for (var j = 0; j < departs1.length; j++) {
if (departs1[j] == $(this).find("input[type=checkbox]").val()) {
$(this).find("input[type=checkbox]").attr("checked", "checked");
}
}
}
});
/* END 修改时绑定部门*/
/* START 修改时绑定人员*/
$("#treeTable tr[manage_id]").each(function () { if ($("#HF_managers_edit").val() != "") {
var managers1 = $("#HF_managers_edit").val().substr(0, $("#HF_managers_edit").val().length - 1).split('|');
for (var j = 0; j < managers1.length; j++) {
if (managers1[j] == $(this).find("input[type=checkbox]").val()) {
$(this).find("input[type=checkbox]").attr("checked", "checked");
}
}
}
});
/* END 修改时绑定人员*/
$('#treeTable').click(function () {
var departs = "";
var managers = "";
$("#treeTable tr[department_id] td input[type=checkbox]").each(function () {
if ($(this).prop('checked') == true) {
departs += $(this).val() + "|";
alert(departs)
}
$("#HF_departs").val(departs);
}); //获取选中部门的值 $("#treeTable tr[manage_id] td input[type=checkbox]").each(function () {
if ($(this).prop('checked') == true) {
managers += $(this).val() + "|";
}
$("#HF_managers").val(managers);
}); //获取选中人员的值
}); }); </script>
<input type="hidden" name="HF_departs" id="HF_departs" />
<input type="hidden" name="HF_managers" id="HF_managers" />
<input type="hidden" name="HF_departs_edit" id="HF_departs_edit" />
<input type="hidden" name="HF_managers_edit" id="HF_managers_edit" />
css
.tree_table{border-collapse:collapse;border-spacing:0px;border: medium none;}
.tree_table tr{vertical-align:middle;height:30px;line-height:30px;border: medium none;}
.tree_table tr td{padding-left:10px;vertical-align:middle;border: medium none;}
.tree_table tr td input{vertical-align:middle;margin-left:10px}
.tree_table tr td img {vertical-align:middle;margin:0 5px}
.tree_table .default_node, .tree_table .default_active_node {vertical-align:middle;width:30px;height:30px;line-height:30px;border: medium none; margin:; padding:;display: inline-block;}
.tree_table .default_active_node {cursor: pointer;}
.tree_table .default_leaf{background:url(allbgs.png) no-repeat -33px -5px;width:30px;}/*T线*/
.tree_table .default_last_leaf{background:url(allbgs.png) no-repeat -120px -5px;width:30px;}/*折线*/
.tree_table .default_vertline{background:url(allbgs.png) no-repeat -57px -5px;width:30px;}/*竖线*/
.tree_table .default_open, .tree_table .default_hover_open{vertical-align:middle;background:url(allbgs.png) no-repeat -0px -5px;width:30px;}
.tree_table .default_shut, .tree_table .default_hover_shut{vertical-align:middle;background:url(allbgs.png) no-repeat -87px -5px;width:30px;}
.tree_table .default_last_shut, .tree_table .default_hover_last_shut{background:url(allbgs.png) no-repeat -158px -5px;width:30px;}
.tree_table .default_last_open, .tree_table .default_hover_last_open{background:url(allbgs.png) no-repeat -203px -5px;width:34px;}
asp.net后台代码
由两张表构成，一张部门表，一张人员表，人员和部门的关系为：人员所属部门
private string TreeTable()
{
BLL.department bll = new BLL.department();
DataTable dt = bll.GetList();//获取所有部门
BLL.manager blluser = new BLL.manager();
StringBuilder JsonData = new StringBuilder();
JsonData.Append("<table id=\"treeTable\">\r\n");
foreach (DataRow dr in dt.Rows)
{
JsonData.Append("<tr id=" + dr["id"].ToString() + " pId=" + dr["parent_depart"].ToString() + " department_id=" + dr["id"].ToString() + ">\r\n");
JsonData.Append("<td><input type=checkbox value=" + dr["id"].ToString() + " /><img src=\"../skin/default/jinghui.png\" />" + dr["depart_name"].ToString() + "</td>\r\n");
JsonData.Append("</tr>\r\n");
//JsonData.Append("{id:" + dr["id"].ToString() + ",department_id:\"department_id\",pId:" + dr["parent_depart"].ToString() + ",name:\"" + dr["depart_name"].ToString() + "\",open:true,icon:\"../skin/default/jinghui.png\"},\r\n");
DataTable dtuser = blluser.GetList(, "department_id=" + dr["id"].ToString(), " id desc").Tables[];
foreach (DataRow rowuser in dtuser.Rows)
{
JsonData.Append("<tr id=" + rowuser["id"].ToString() + " pId=" + rowuser["department_id"].ToString() + " manage_id=" + rowuser["id"].ToString() + ">\r\n");
JsonData.Append("<td><input type=checkbox value=" + rowuser["id"].ToString() + " /><img src=\"../skin/default/jingyuan.png\" />" + rowuser["real_name"].ToString() + "</td>\r\n");
JsonData.Append("</tr>\r\n");
//JsonData.Append("{id:" + rowuser["id"].ToString() + ",manage_id:\"manage_id\",pId:" + rowuser["department_id"].ToString() + ",name:\"" + rowuser["real_name"].ToString() + "\",open:true,icon:\"../skin/default/jingyuan.png\"},\r\n"); } }
JsonData.Append("</table>\r\n"); return JsonData.ToString();
}
protected string zNodes="";
//页面加载事件
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.zNodes = TreeTable();
}
}
TreeTable基础讲解：http://www.cnblogs.com/qigege/p/5213639.html
支持IE6的树形节结构TreeTable实际应用案例的更多相关文章
- 支持IE6的树形节结构TreeTable
关于TreeTable实际应用的案例:http://www.cnblogs.com/qigege/p/5213689.html treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非 ...
- 国人Web前端开发必备干货，一个完美支持IE6在内所有浏览器的CSS框架
摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...
- MySQL 树形索引结构 B树 B+树
MySQL 树形索引结构 B树 B+树 如何评估适合索引的数据结构 索引的本质是一种数据结构 内存只是临时存储,容量有限且容易丢失数据.因此我们需要将数据放在硬盘上. 在硬盘上进行查询时也就产生了 ...
- jQuery 2.0发布，不再支持IE6/7/8
有时发现jQuery库引用的都对,javascript代码写的也没问题,可是jquery就是出现问题,额--我发现换个jquery库就没问题了,长时间不关注jquery的问题而已: 很多人都没有使用最 ...
- 淘宝天猫网站停止支持IE6、IE7浏览器，你还在用xp吗？
2016年4月14日,是科比正式告别篮球的最后一场球赛.大家都在忙着各种纪念和怀念着看科比打球的青葱岁月.不过已经完美谢幕.而我们今天要说的是微软的IE6.IE7浏览器.淘宝网和天猫商城正式停止支持I ...
- CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...
- [SinGuLaRiTy] 树形存储结构阶段性测试
[SinGuLaRiTy-1011] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. G2019级信息奥赛专项训练 题目 程序名 时间 内存 ...
- oracle 树形表结构查询 排序
oracle 树形表结构排序 select * from Table start with parentid is null connect by prior id=parentid order SI ...
- Java实现遍历N级树形目录结构
最近挺忙,一直在做项目,然后有个树形目录结构需要返回给前端,这里给大家说一下实现的思路. 具体达到的效果类似: 一级目录A: 二级目录A: 三级目录: 四级目录: 文件.txt 二级目录B: 文件1. ...
随机推荐
- 小白日记50：kali渗透测试之Web渗透-CSRF
CSRF CSRF原理:经常与XSS混淆. 从信任的角度进行区分:XSS:利用用户对站点的信任:CSRF:利用站点对已经身份认证的信任(有一定的信任)[默认情况:站点不信任客户端] 结合社工在身份认证 ...
- 手动实现 KVO
来源:伯乐在线 - Jerry4me 链接:http://ios.jobbole.com/88828/ 点击 → 申请加入伯乐在线专栏作者 我的Github地址 : https://github.co ...
- iOS获取设备型号
导入头文件 #include <sys/types.h> #include <sys/sysctl.h> 直接调用 //获得设备型号 + (NSString *)getCurr ...
- PostgreSQL异步客户端（并模拟redis 数据结构）
以前为了不在游戏逻辑(对象属性)变更时修改数据库,就弄了个varchar字段来表示json,由服务器逻辑(读取到内存)去操作它. 但这对运维相当不友好,也不能做一些此Json数据里查询. 所以后面就用 ...
- centos下cp -r 命令可拷贝文件夹
LINUX命令的cp -r 和-R的区别 功能上是等价的.不加-r或者-R的时候,只拷贝文件,不拷贝文件夹:加上后则会拷贝文件夹——包括下一级的子文件夹,以及子文件夹中的子文件夹,余此类推.rm的-R ...
- leetcode 题解：Binary Tree Inorder Traversal （二叉树的中序遍历）
题目: Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary ...
- unity中UI界面显示FPS
直接上代码 using UnityEngine; using System.Collections; public class HUDFPS : MonoBehaviour { ...
- iOS 导航栏颜色字体等的自定义
1.设置导航栏中间文字的文字颜色和文字大小 方法一:系统方法 self.title = @"下载微课";//在有navigationController的控制器中,作用与self. ...
- shell配置环境变量
我们在使用Xshell开发机时往往会遇到一些问题,比如使用某些命令他会报command not found,,出现这种情况的原因是我们必须要配置一下环境变量,这样就可以在任何path中访问了. 这就需 ...
- python 3.3.2 爬虫记录
网络上大部分关于python爬虫的介绍以及代码讲解,都用的是python2.7或以下版本,用python3.x版本的甚少. 在python3.3.2版本中,没有urllib2这个库,也没有cookie ...