表格展开伸缩以及ztree异步加载

html代码：

html代码：

<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>

<tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>

<tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>

表格tr设置属性有要求 父类tr统一class为 parent ,id 为row_01 对应子类class 为child_row+数字

这样即 点击class为paren的添加css高亮显示(如果存在css添加不存在去掉) 同时对应的子类chid_row_id 隐藏

js代码：

$(function(){
$('tr.parent').click(function(){
$(this)
.toggleClass("selected")
.siblings('.child_'+this.id).toggle();
});
})

这样通过上面的html 会发现如果自己写一个tree的思路当然我用的是ajax请求数据 js动态创建dom方式.

思路1：首先创建父类节点 如上面的：(对应sql select xx from tree )

<tr class="parent" id="row_01"><td colspan="3">父类1</td></tr>
<tr class="parent" id="row_02"><td colspan="3">父类2</td></tr>
<tr class="parent" id="row_03"><td colspan="3">父类3</td></tr>

当然你会说这那里是tree 你看看tree的父节点的dom 是不是就是这个样子呢？ 把对应的tr换成ul

思路2：当点击父类节点的时候获取当前的id 并创建dom (数据库sql sql select xx from tree where parent='1')

最后不久ok了吗。当然这个要求就是灵活的创建dom

附加ztree插件的异步加载代码实例：(他的内部肯定也是上面的逻辑实现的)

var setting = {
view: { showIcon: false },
check: { enable: true },
async: {
enable: true,
url: "BDSys_List.ashx?&action=userTree&holdID=" + $.cookie("HoldID"),
autoParam: ["id", "name=n", "level=lv"],
dataFilter: filter
},
callback: { onClick: onClick, onCheck: onCheck }
}
var zTree, HoldID;

$(function () {
$.fn.zTree.init($("#userTree"), setting);
zTree = $.fn.zTree.getZTreeObj("userTree");
setCheck();
});function filter(treeId, parentNode, childNodes) {
return childNodes;
}
function onClick(event, treeId, treeNode) {

}
function setCheck() {
zTree.setting.check.chkboxType = { "Y": "s", "N": "s" };
}
function onCheck(event, treeId, treeNode) {
var zdNumber = "", bchecked, phone="";
bchecked = treeNode.checked;
treeCheckedNodes = zTree.getCheckedNodes(true);
if (bchecked == true) {
for (var i = 0; i < treeCheckedNodes.length; i++) {
if (treeCheckedNodes[i].level == 0) {
zdNumber += treeCheckedNodes[i].name + ",";
} else {
phone += treeCheckedNodes[i].name + ",";
}
}
}
else if (bchecked == false) {
for (var i = 0; i < treeCheckedNodes.length; i++) {
if (treeCheckedNodes[i].level == 0) {
zdNumber += treeCheckedNodes[i].name + ",";
} else {
phone += treeCheckedNodes[i].name + ",";
}
}
}
zdCardNumber.val(zdNumber);//给其他文本赋值
phoneNumber.val(phone);
};

对应一般处理程序代码：

case "userTree": ResponseClient(context, x =>                   //userTree
{
var name = HttpUtility.HtmlEncode(context.Request["n"]);
var isParent = HttpUtility.HtmlEncode(context.Request["isParent"]);
var id = HttpUtility.HtmlEncode(context.Request["id"]);
var hoidID = HttpUtility.HtmlEncode(context.Request["holdID"]);
dt = BizMessage.ZtreeList(name,hoidID);
List<userZtree> list = new List<userZtree>();
JavaScriptSerializer jss = new JavaScriptSerializer();
if (name == "" || name == null)
{
var i = 0;
foreach (DataRow item in dt.Rows)
{
i++;
var t = new userZtree() { id = i.ToString(), isParent = true, name = item[0].ToString() };
list.Add(t);
}
}
else
{
foreach (DataRow item in dt.Rows)
{
list.Add(new userZtree() { id = item[0].ToString(), isParent = false, name = item[1].ToString() });
}
}
context.Response.Write(jss.Serialize(list));
});break;

对应sql代码

public DataTable ZtreeList(string deviceID,string hoidID)
{
sb.Clear();
if (deviceID != null)
{
sb.AppendFormat(@"select b.id,b.SIM from std_objectInfo  a left join std_ObjSIM b on a.SIM=b.DeviceID
where a.isDeleted=0 and a.HoldID='{0}' and b.DeviceID='{1}' group by b.SIM,b.id", hoidID, deviceID);
}
else
{
sb.AppendFormat(@"select a.SIM from std_objectInfo a left join std_ObjSIM b on a.SIM=b.DeviceID where a.isDeleted=0 and a.HoldID='{0}' ", hoidID);
}
return Commit.ExecuteDataSet(sb.ToString());
}

数据库表查询



是不是比你的表设计的不合理呢 在js的面前 那些用sql模拟递归 或者采用方法递归的面前是那么的脆弱。