jQuery treetable:获取所有节点的第一个和最后一个子节点

时间:2015-04-17 07:23:40

标签: jquery html html-table treetable

我有一个TreeTable Api http://ludo.cubicphuse.nl/jquery-treetable/#usage,用于在Html表格中显示我的MySql数据。

我想要做的是在jQuery中使用OnDocumentReady我需要禁用一些按钮。

enter image description here

这是我的表格结构每行有2个按钮向上移动并向下移动。

为了改变我创建它们的tr的顺序。我的问题是如何才能获得每个节点的第一个孩子和最后一个孩子,这样我就可以禁用第一个孩子的向上移动按钮并禁用最后一个孩子的向下移动按钮。如果节点没有兄弟节点,则禁用这两个按钮。

到目前为止,我已经尝试了这个,但没有帮助我

$('tr td:last-child').each(function(){
    var $this = $(this).contents(".md");
    $this.prop( "disabled", true );
});
$('tr td:last-child').each(function(){
        var $this = $(this).contents(".mu");
        $this.prop( "disabled", true );
});

.md(moveDown)和.mu(moveUp)是按钮的类,在稍后单击时将执行某些数据库任务。

这是我正在处理上表结构的HTML PHP代码

<?php
include 'dbconn.php';
    $conn = mysql_connect($dbhost, $dbuser, $dbpass);
    mysql_connect('localhost','root','root');
    mysql_select_db('cms');
    //select all rows from the main_menu table
    $result = mysql_query("select id, label as title, parent as parentid,link,status from pages order by seq asc");
    //create a multidimensional array to hold a list of menu and parent menu
    $menu = array(
        'menus' => array(),
        'parent_menus' => array(),
    );
    //build the array lists with data from the menu table
    while ($row = mysql_fetch_assoc($result)) {
        //creates entry into menus array with current menu id ie. $menus['menus'][1]
        $menu['menus'][$row['id']] = $row;
        //creates entry into parent_menus array. parent_menus array contains a list of all menus with children
        $menu['parent_menus'][$row['parentid']][] = $row['id'];
    }
    // Create the main function to build milti-level menu. It is a recursive function.  
    echo $html='<table class="test2 table  table-bordered">
                <tr>
                    <th>Page Name</th>
                    <th> Status </th><th> Edit </th><th> Add Submenu </th><th><!--Delete Menu--></th><th> Sequence </th>
                </tr>
                <tr data-tt-id="0">
                    <td class="Root">Root</td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td><button class="btn btn-info" onclick="addMenu(0,0)" data-toggle="modal" data-target="#addmenu">
                        <span  class="glyphicon glyphicon-plus-sign"></span>Add</button></td>
                    <td>
                    </td>
                </tr>';
    function buildMenu($parent, $menu) {
    $char=" ";
    if (isset($menu['parent_menus'][$parent])) {
foreach ($menu['parent_menus'][$parent] as $menu_id) {
            //echo "id:".$menu['menus'][$menu_id]['id']."par:".$menu['menus'][$menu_id]['parentid'];
              if($menu['menus'][$menu_id]['status']=='active')
              {
                  $class="btn-success";
                  $span="glyphicon glyphicon-ok-sign";
                  $set="";
              }
              else if($menu['menus'][$menu_id]['status']=='deactive')
                      {
                          $class="btn-danger";
                          $span="glyphicon glyphicon-remove-sign";
                          $set="disabled='disabled'";
                      }
                      else
                          {
                              $class="btn-info";

                          }
            if (!isset($menu['parent_menus'][$menu_id])) {

                $html .= '<tr data-tt-id="'.$menu['menus'][$menu_id]['id'].'" data-tt-parent-id="'.$menu['menus'][$menu_id]['parentid'].'">
                <td class="Root">'.$menu['menus'][$menu_id]['title'].'</td>
                <td><button style="width:6em;" id="'.$menu['menus'][$menu_id]['id'].'" class="btn '.$class.'" 
                onclick="status('."'".$menu['menus'][$menu_id]['id']."'".",".
                "'".$menu['menus'][$menu_id]['parentid']."'".","."'".$menu['menus'][$menu_id]['status']."'".')">
                <span  class="'.$span.'"></span>'.$menu['menus'][$menu_id]['status'].'</button>
                </td>

                <td><button id="'.$menu['menus'][$menu_id]['title'].'" class="btn btn-warning setting dbbutton"  onclick="edit('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')" '.$set.'>
                <span  class="glyphicon glyphicon-edit"></span>Edit</button>
                </td>

                <td><button class="btn btn-info" onclick="addMenu('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')" 
                    data-toggle="modal" data-target="#addmenu">
                <span  class="glyphicon glyphicon-plus-sign"></span>Add</button>
                </td>

                <td><!--<button class="btn btn-danger" onclick="deleteMenu('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')">
                <span  class="glyphicon glyphicon-trash"></span>Delete</button>--></td>             


                <td>    
                    <button id="'.$menu['menus'][$menu_id]['id'].'" class="btn btn-default btn-xs mu" onclick="moveUp(this)" style="color:orange !important;" title="Move Up">
                        <span class="glyphicon glyphicon-triangle-top" ></span>
                    </button>
                    <button id="'.$menu['menus'][$menu_id]['id'].'" class="btn btn-default btn-xs md" onclick="moveDown(this)" style="color:orange !important" title="Move Down">
                        <span class="glyphicon glyphicon-triangle-bottom"></span>
                    </button>
                </td>
                </tr>'
                ;
            }
            if (isset($menu['parent_menus'][$menu_id])) {
                $html .= "<tr data-tt-id='".$menu['menus'][$menu_id]['id']."' data-tt-parent-id='".$menu['menus'][$menu_id]['parentid']."'>
                            <td class='Root'>".$menu['menus'][$menu_id]['title'];
                $html .= '</td>
                <td><button style="width:6em;" id="'.$menu['menus'][$menu_id]['id'].'" class="btn '.$class.'" onclick="status('."'".$menu['menus'][$menu_id]['id']."'".",".
                "'".$menu['menus'][$menu_id]['parentid']."'".","."'".$menu['menus'][$menu_id]['status']."'".')">
                <span  class="'.$span.'"></span>'.$menu['menus'][$menu_id]['status'].'</button>
                </td>

                <td><button id="'.$menu['menus'][$menu_id]['title'].'"class="btn btn-warning setting dbbutton"  onclick="edit('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')" '.$set.'>
                <span  class="glyphicon glyphicon-edit"></span>Edit</button>
                </td>

                <td><button class="btn btn-info" onclick="addMenu('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')" data-toggle="modal" data-target="#addmenu">
                <span  class="glyphicon glyphicon-plus-sign"></span>Add</button>
                </td>

                <td><!--<button class="btn btn-danger" onclick="deleteMenu('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')">
                <span  class="glyphicon glyphicon-trash"></span>Delete</button>--></td>

                <td>    
                    <button id="'.$menu['menus'][$menu_id]['id'].'" class="btn btn-default btn-xs mu" onclick="moveUp(this)" style="color:orange !important;" title="Move Up">
                        <span class="glyphicon glyphicon-triangle-top" ></span>
                    </button>
                    <button id="'.$menu['menus'][$menu_id]['id'].'" class="btn btn-default btn-xs md" onclick="moveDown(this)" style="color:orange !important" title="Move Down">
                        <span class="glyphicon glyphicon-triangle-bottom"></span>
                    </button>
                </td>


                ';
                $html .= buildMenu($menu_id, $menu);
                //$html .= "</td>";
                $html .= "</tr>";
            }
        }
    }
    return $html;
}

echo buildMenu(0, $menu);

echo "</table>";
?>

1 个答案:

答案 0 :(得分:1)

您需要使用.find()代替.contents()来查找td中具有类.md的元素。您也不需要使用.each(),直接将属性设置为所有属性:

$('tr td .md:last-child').prop( "disabled", true );