单击两次时,Javascript Jtable关闭子表

时间:2014-08-30 22:01:44

标签: javascript jquery asp.net-mvc jquery-jtable

我有一些带有子表的Javascript Jtable。我想要做的是在第二次单击行标题时关闭子表。

所以我设置了一些全局变量:

var NotesOpen = false;
var HistoryOpen = false;
var ElementsOpen = false;

所以在f.ex的Notes子表中,click函数如下所示:

$img.click(function () {

if (NotesOpen == true) {
   console.log($(this).closest('tr').next('tr').find(':button').html());

   $(this).closest('tr').next('tr').find(':button').click();
   $(this).closest('tr').next('tr').find(':button').trigger('click');
   $(this).closest('tr').next('tr').find('.jtable-close-button').click();
}
NotesOpen = true;

我可以看到调试行。它找到了正确的行,因为它在控制台窗口中显示为<span>Close</span>。如果我只是检查$(this).closest('tr').next('tr').html()我可以看到它在正确的行上。

但是,当我尝试触发点击事件时,我只会收到错误:Uncaught Error: cannot call methods on jtable prior to initialization; attempted to call method 'destroy' jquery-2.1.1.js:250

1 个答案:

答案 0 :(得分:3)

此代码有助于使用单击图像图标打开或关闭子表。

//CHILD TABLE DEFINITION FOR "PHONE NUMBERS"
Phones: {
    title: '',
    width: '5%',
    sorting: false,
    edit: false,
    create: false,
    display: function (studentData) {

        var $img = $('<img src="/Content/images/Misc/phone.png" title="Edit phone numbers" />'), //Create an image that will be used to open child table
            parentTable = $("#StudentTableContainer"); 

        //Open | Close child table when user clicks the image
        $img.click(function(){

            var tr = $(this).parents("tr"),
                isChildRowOpen = parentTable.jtable("isChildRowOpen", tr );

            if( isChildRowOpen ){
                $( parentTable.jtable("getChildRow", tr ) ).slideUp();
                return;
            }

            // some another code
        }
    }
}