支持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. ...
随机推荐
- C# 之 System.Diagnostics.Process.Start的妙用
经常会遇到在Winform或是WPF中点击链接或按钮打开某个指定的网址, 或者是需要打开电脑中某个指定的硬盘分区及文件夹, 甚至是"控制面板"相关的东西, 如何做呢? 方法:使用S ...
- 结合源码看nginx-1.4.0之nginx模块组织结构详解
目录 0. 摘要 1. nginx模块组织结构 2. nginx模块数据结构 3. nginx模块初始化 4. 一个简单的http模块 5. 小结 6. 参考资料 0. 摘要 nginx有五大优点:模 ...
- PHP 中mysql如何实现事务提交？
事务就是指对数据库的多次修改,要么全部成功,要么全部失败,不能出现部分修改成功,部分修改失败的情况. PHP下操作mysql数据库要实现事务提交,需注意以下方面: 1, 数据库表存储引擎类型设置为in ...
- AutoCAD使用技巧
1, 画指定长度的直线 水平线:拾取起点,然后输入@5,0或者@-5,0 垂直线:拾取起点,然后输入@0,5或者@0,-5如果你所要画的线是斜线,可以先画一条水平线,然后点击它,对它进行夹点编辑,使它 ...
- xml格式化成json
JsonConvert.SerializeObject(model) XmlDocument doc = new XmlDocument(); doc.Loa ...
- 获取数组排序后的index算法实现
需求: 一个数组var arr = [4,7,2,9],排序后的新数组var newArr = [2,4,7,9]或者[9,7,4,2] 我们要得到的是排序后元数组的每一项在新数组中的位置所构成的数组 ...
- HDU 1003 Max Sum && HDU 1231 最大连续子序列 (DP)
Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- 剑指Offer32 丑数
/************************************************************************* > File Name: 32_UglyNu ...
- Sqlite3笔记
.tables 查看表.databases 创建数据库alter table 表名 RENAME TO 新表名ALTER TABLE 表名 add column 列名 datatype [DEFAUL ...
- Linux之装机指南
软件: Variety:桌面壁纸自动切换 sudo add-apt-repository ppa:peterlevi/ppa sudo apt-get update sudo apt-get inst ...