控件treetable使用
控件下载地址 https://files.cnblogs.com/bin-pureLife/treeTable1.4.2.zip
该控件提供俩种类型的表格树。支持ajax动态加载。很方便。不错的东西。
以下是一些摘要。
控件效果图:
代码摘要:
<link href="/ui/Beta/javascripts/treeTable v1.4.2/demo/style/demo.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/ui/Beta/javascripts/treeTable v1.4.2/script/jquery.js"></script> <script src="/ui/Beta/javascripts/treeTable v1.4.2/script/treeTable/jquery.treeTable.js" type="text/javascript"></script> <link id="tree_table_default" href="/ui/Beta/javascripts/treeTable v1.4.2/script/treeTable/default/jquery.treeTable.css" rel="stylesheet" type="text/css"> <link id="tree_table_vsStyle" href="/ui/Beta/javascripts/treeTable v1.4.2/script/treeTable/vsStyle/jquery.treeTable.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> $(function(){ var option = { theme:'vsStyle', expandLevel : 2, beforeExpand : function($treeTable, id) { //判断id是否已经有了孩子节点,如果有了就不再加载,这样就可以起到缓存的作用 if ($('.' + id, $treeTable).length) { return; } //这是ajax请求子节点。 $.post('illtag',{ key : 'gethtml', parentid : id }, function(data, textStatus) { $treeTable.addChilds(data); }); }, onSelect : function($treeTable, id) { window.console && console.log('onSelect:' + id); } }; $('#treeTable1').treeTable(option); option.theme = 'default'; $('#treeTable2').treeTable(option); }); </script>
以上是 JS 文件 CSS 文件 和一段JS代码
注意:在项目中使用你需要对JS 中的一些路径变量做出修改,一下是我修改的,对应我的引用路径应该能看出来。
HTML body部分
if (document.location.href.indexOf('http://') != 0) { var path = '../ui/Beta/javascripts/treeTable v1.4.2/script/treeTable/'; } else { var path = SITE_URL + '/ui/Beta/javascripts/treeTable v1.4.2/script/treeTable/'; }
html body
<table id="treeTable2" style="width:100%"> <tr style="border-bottom:1px solid #f7f7f7;background-color:#f7f7f7;"> <td width="15%" align=center>标签名</td> <td width="10%" align=center>关联信息</td> <td width="10%" align=center>关联食物</td> <td width="10%" align=center>关联菜谱</td> <td width="10%" align=center>关联运动</td> <td width="10%" align=center>操作</td> </tr> <tr></tr> <?php foreach($res as $key => $val){ echo '<tr id="'.$val['id'].'"> <td controller="true" ><span >'.$val["illname"].'</span></td>' .'<td width="10%" align=center>'.$val["infonum"].'</td>' .'<td width="10%" align=center>'.$val["foodnum"].'</td>' .'<td width="10%" align=center>'.$val["caipunum"].'</td>' .'<td width="10%" align=center>'.$val["actnum"].'</td>' .'<td width="10%" align=center><a title="编辑" href="/Csconfig/editilltag/key/edit/id/'.$val['id'].'"><input type="button" class="editbtn" /></a>  <a title="删除" href="javascript:void(0)" onclick ="deleteNode('.$val['id'].')"><input type="button" class="deletebtn" /></a> </td></tr>'; $tempArr = $arr[$val['id']]; for($i = 0; $i < count($tempArr); $i++){ echo '<tr id="'.$tempArr[$i]['id'].'" pId="'.$val['id'].'" hasChild="true""> <td ><span >'.$tempArr[$i]["illname"].'</span></td>' .'<td width="10%" align=center>'.$tempArr[$i]["infonum"].'</td>' .'<td width="10%" align=center>'.$tempArr[$i]["foodnum"].'</td>' .'<td width="10%" align=center>'.$tempArr[$i]["caipunum"].'</td>' .'<td width="10%" align=center>'.$tempArr[$i]["actnum"].'</td>' .'<td width="10%" align=center> <a title="编辑" href="/Csconfig/editilltag/key/edit/id/'.$tempArr[$i]['id'].'"><input type="button" class="editbtn" /></a>  <a title="删除" href="javascript:void(0)" onclick ="deleteNode('.$tempArr[$i]['id'].')"><input type="button" class="deletebtn" /></a> </td></tr>'; } } ?> </table>
我用了两层循环,因为我发现没有父节点的话,无法进行动态加载。
ajax 后台拼写html代码
foreach($res as $key => $val){ $str .= ' <tr id="'.$val['id'].'" pId="'.$val['parentid'].'" hasChild="true""> .<td ><span >'.$val["illname"].'</span></td>' .'<td width="10%" align=center>'.$val["infonum"].'</td>' .'<td width="10%" align=center>'.$val["foodnum"].'</td>' .'<td width="10%" align=center>'.$val["caipunum"].'</td>' .'<td width="10%" align=center>'.$val["actnum"].'</td>' .'<td width="10%" align=center> <a title="编辑" href="/Csconfig/editilltag/key/edit/id/'.$val['id'].'"><input type="button" class="editbtn" /></a>  <a title="删除" href="javascript:void(0)" onclick ="deleteNode('.$val['id'].')"><input type="button" class="deletebtn" /></a> </td></tr>'; } print_r($str); exit();
积累知识,分享知识,学习知识。