1

我试图使jTable中的整行可点击，以便它们显示各自的子表。我发现 Jules Colles 的一段可爱的代码（这里）用于行上的点击事件，但我不确定如何将openChildTable方法与它集成。我尝试的代码如下：

  <div id="UsernameTable"></div>

  <script type="text/javascript">
    $(document).ready(function () {

      $('#UsernameTable').jtable({
        title: 'Username Table',
        paging: true,
        sorting: true,
        defaultSorting: 'Name ASC',
        openChildAsAccordion: true,
        actions: {
            listAction: 'doStuff.php?action=list'
        },
        fields: {
          ID: {
            key: true,
            create: false,
            edit: false,
            list: false
          }
          Name: {
            title: 'Name',
            width: '25%'
          },
          Comment: {
            title: 'Comment',
            width: '50%'
          },
          Date: { 
            title: 'Date',
            width: '25%',
            type: 'date',
            create: false,
            edit: false
          }
        },
        recordsLoaded: function(event, userData) {
          $('.jtable-data-row').click(function() {
            var row_id = $(this).attr('data-record-key');
            //alert('clicked row with id '+row_id);
            $('#UsernameTable').jtable('openChildTable', row_id, {
              actions: {
                  listAction: 'doStuff.php?action=listChild&ID=' + userData.record.ID
              },
              fields: {
                  ID: {
                      type: 'hidden',
                      defaultValue: userData.record.ID
                  },
                  SecondKey: {
                      key: true,
                      create: false,
                      edit: false,
                      list: false
                  },
                  DOB: {
                      title: userData.record.Name + '\'s Date of Birth',
                      width: '25%',
                      type: 'date'
                  },
                  Hometown: {
                      title: 'Hometown',
                      width: '50%',
                      type: 'textarea'
                  },
                  Age: {
                      title: 'Age',
                      width: '25%'
                  }
                }
              }, function (data) {
                  data.childTable.jtable('load');
            });
          });
        }
      });
    });
  </script>

我已经独立测试了其他所有内容，所以我知道 PHP 和 MySQL 都可以正常工作。我还验证了使用display:添加列并使用切换按钮显示子项的传统路线的功能。但是，再一次，我真的希望能够单击一行中的任意位置并让它展开一个新表。任何帮助将不胜感激。

4

2 回答 2

0

您必须将选择选项添加到主表（选择：true，）并使用 selectionChanged 函数。在此回调中，您可以使用“selectedRows”打开子项（如果多选未激活则更容易）

selectionChanged: function () {
   $selectedRows.each(function () {             
   // Open child stuff
   });
},

希望对你有用

于 2014-02-05T15:59:11.290 回答
0 
/**
 * Document JTable Data source
 * 
 * @author pradeep.mishra
 * @version 1.0
 * @date May 20, 2015
 */
$(document).ready(function() {
    $(document)
        .ajaxStart($.blockUI({
            message: ''
        }))
        .ajaxStop($.unblockUI); // Blocks UI till Ajax Call

    // finishes working.
    var baseURL = getBaseUrl();
    var globalRecords = [];
    // setup the jTable that will display the results
    $('#documentSearchDiv').jtable({
        title: 'Document',
        paging: false,
        pageSize: 30,
        sorting: false,
        pageSizeChangeArea: false,
        selecting: true,
        multiselect: false,
        selectingCheckboxes: false,
        columnResizable: false,
        columnSelectable: false,
        loadingAnimationDelay: 2000,
        dialogShowEffect: 'scale',
        dialogHideEffect: 'scale',
        actions: {
            listAction: baseURL + '/document/search',
            updateAction: baseURL + '/document/update',
            deleteAction: baseURL + '/document/remove',
        },
        fields: {
            id: {
                key: true,
                create: false,
                edit: false,
                list: false
            },

            // CHILD TABLE DEFINITION FOR
            // "Document Relationship"
            DocumentRelationship: {
                title: '',
                width: '5%',
                sorting: true,
                edit: false,
                create: false,
                display: function(data) {
                    // Create an image that will
                    // be used to open child
                    // table
                    var $img = $('<img src="' + baseURL + '/static/css/themes/metro/ThemedExpand.png" title="Modify Code and Value" />');
                    // Open child table when
                    // user clicks the image

                    $img.click(function() {
                        var check = $img.attr('src');
                        if (check == baseURL + '/static/css/themes/metro/ThemedExpand.png') {
                            $img.attr('src', '' + baseURL + '/static/css/themes/metro/ThemedCollap.png');
                            $('#documentSearchDiv')
                                .jtable('openChildTable',
                                    $img.closest('tr'), {
                                        title: 'please enter your information',
                                        selecting: true,
                                        actions: {
                                            listAction: function(postData, jtParams) {
                                                return {
                                                    "Result": "OK",
                                                    "Records": data.record.relationships,
                                                    "TotalRecordCount": 2
                                                };
                                            },
                                            updateAction: function(data) {
                                                var docData = JSON.parse(jTableSelect('documentSearchDiv'));
                                                var docRelData = postStringToJson(data);
                                                docRelData = JSON.parse(docRelData);
                                                var id = docData[0].id;
                                                var document = {};
                                                document.id = id;
                                                docRelData.document = document;
                                                return $.Deferred(function($dfd) {
                                                    function success(data) {
                                                        $dfd.resolve(data);
                                                    }

                                                    function failure() {
                                                        $dfd.reject();
                                                    }
                                                    post(baseURL + '/documentRelationship/update', 'POST', JSON
                                                        .stringify(docRelData), success, failure);
                                                });
                                            },

                                            deleteAction: baseURL + '/documentRelationship/remove',

                                        },

                                        fields: {
                                            id: {
                                                key: true,
                                                create: false,
                                                edit: false,
                                                list: false
                                            },

                                            relationshipCode: {
                                                title: 'Code',
                                                width: '15%',
                                                inputClass: 'validate[required]',

                                            },
                                            relationshipValue: {
                                                title: 'Value',
                                                width: '15%',
                                                inputClass: 'validate[required]',

                                            },

                                        },

                                        formCreated: function(event, data) {
                                            data.form.validationEngine('attach', {
                                                binded: false
                                            });

                                        },
                                        // Validate
                                        // inner
                                        // form
                                        // when
                                        // it
                                        // is
                                        // being
                                        // submitted
                                        formSubmitting: function(event, data) {
                                            return data.form.validationEngine('validate');
                                        },
                                        // Dispose
                                        // validation
                                        // logic
                                        // when
                                        // form
                                        // is
                                        // closed
                                        formClosed: function(event, data) {
                                            data.form.validationEngine('hide');
                                            data.form.validationEngine('detach');
                                        },
                                        loadingRecords: function() {
                                            $('.jtable-child-table-container div.jtable-main-container table.jtable thead').html(
                                                '<tr><th class="jtable-column-header" style="width: 15%;"><div class="jtable-column-header-container"><span class="jtable-column-header-text">Code</span><div class="jtable-column-resize-handler"></div></div></th><th class="jtable-column-header" style="width: 15%;"><div class="jtable-column-header-container"><span class="jtable-column-header-text">Value</span></div></th><th class="jtable-command-column-header" style="width: 1%;" colspan="2"><div class="jtable-column-header-container"><span class="jtable-column-header-text">Action</span></div></th></tr>')
                                        }

                                    },
                                    function(data) {
                                        data.childTable.jtable('load');
                                    });

                        } else {
                            $('#documentSearchDiv')
                                .jtable('closeChildTable', $img.closest('tr'));
                            $img.attr('src', '' + baseURL + '/static/css/themes/metro/ThemedExpand.png');
                        }
                    });

                    return $img;

                }
            },
            fileName: {
                title: 'File Name',
                width: '15%',
                inputClass: 'validate[required]',
            },
            description: {
                title: 'Description',
                width: '30%',
                inputClass: 'validate[required]',
            },
            type: {
                title: 'Document Type',
                width: '15%',
                inputClass: 'validate[required]',
            },
            mimeType: {
                title: 'MIME Type',
                width: '15%',
                inputClass: 'validate[required]',
            },

        },
        // Initialize validation logic when a
        // form is created
        formCreated: function(event, data) {
            data.form.validationEngine('attach', {
                binded: false
            });

        },
        // Validate form when it is being
        // submitted
        formSubmitting: function(event, data) {
            return data.form.validationEngine('validate');
        },
        // Dispose validation logic when form is
        // closed
        formClosed: function(event, data) {
            data.form.validationEngine('hide');
            data.form.validationEngine('detach');
        },

        recordsLoaded: function(event, data) {
            var headers = JSON.parse('{"0": { "sorter": "text" },"1" : {"sorter" : "text" },"2": {"sorter" : "text"},"3": {"sorter" : "text"}}');
            initializeTableSorter(headers);
        },
        loadingRecords: function() {
            $('.jtable-main-container table.jtable thead').html(
                    '<tr><th class="jtable-column-header" style="width: 2%;"><div class="jtable-column-header-container"><span class="jtable-column-header-text"></span></div></th><th class="jtable-column-header" style="width: 18.3686%;"><div class="jtable-column-header-container"><span class="jtable-column-header-text">File Name</span></div></th><th class="jtable-column-header" style="width: 36.7372%;"><div class="jtable-column-header-container"><span class="jtable-column-header-text">Description</span></div></th><th class="jtable-column-header" style="width: 18.3686%;"><div class="jtable-column-header-container"><span class="jtable-column-header-text">Document Type</span></div></th><th class="jtable-column-header" style="width: 18.3686%;"><div class="jtable-column-header-container"><span class="jtable-column-header-text">MIME Type</span></div></th><th class="jtable-command-column-header" style="width: 1%;" colspan="2"><div class="jtable-column-header-container"><span class="jtable-column-header-text">Action</span></div></th></tr>')
            $('.jtable').addClass("tablesorter");
        }
    });
    $('#documentSearchDiv').jtable('load');

    $('#documentSearchInnerDiv') jtable({
        title: 'Document Relationship',
        paging: false,
        pageSize: 30,
        sorting: false,
        clientOnly: true,
        useBootstrap: true,
        editinline: {
            enable: true
        },
        pageSizeChangeArea: false,
        selecting: true,
        multiselect: false,
        selectingCheckboxes: false,
        columnResizable: false,
        columnSelectable: false,
        loadingAnimationDelay: 2000,
        dialogShowEffect: 'scale',
        dialogHideEffect: 'scale',
        actions: {
            createAction: function(data) {
                console.info(postStringToJson(data));
                var dat = postStringToJson(data);
                return {
                    "Result": "OK",
                    "Record": JSON.parse(dat)
                };
            },

        },
        fields: {
            id: {
                type: 'hidden',
            },
            relationshipCode: {
                title: 'Code',
                width: '15%',
                inputClass: 'validate[required]',

            },
            relationshipValue: {
                title: 'Value',
                width: '15%',
                inputClass: 'validate[required]',

            },
        },
        // Initialize validation logic when a
        // form is created
        formCreated: function(event, data) {
            data.form.validationEngine('attach', {
                binded: false
            });

        },
        // Validate form when it is being
        // submitted
        formSubmitting: function(event, data) {
            return data.form.validationEngine('validate');
        },
        // Dispose validation logic when form is
        // closed
        formClosed: function(event, data) {
            data.form.validationEngine('hide');
            data.form.validationEngine('detach');
        },
        recordAdded: function(event, data) {
            globalRecords.push(data.record);
        }

    });

    $("#documentAddNew")
        .submit(function(e) {
            e.preventDefault();

            var data = form2js('documentAddNew', '.', false);
            data.relationships = globalRecords;
            return $.Deferred(function($dfd) {
                function success() {
                    $("#documentSearchInnerDiv tr")
                        .remove();
                    globalRecords = [];
                    $('#documentModal')
                        .modal('hide');
                    $('#documentSearchDiv')
                        .jtable('reload');

                }

                function failure() {
                    $dfd.reject();
                }
                post(baseURL + '/document/save', "POST", JSON.stringify(data), success, failure);
                $("#documentAddNew")[0].reset();

            });
        });
});
于 2015-08-03T15:29:38.853 回答