控件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>&nbsp
                        <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>&nbsp
                              <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>&nbsp
                        <a title="删除" href="javascript:void(0)" onclick ="deleteNode('.$val['id'].')"><input type="button" class="deletebtn" /></a>
                    </td></tr>';
            }
            print_r($str);
            exit();