ASP.NET ZERO 学习 JTable的ChildTable用法

效果图：

Jtable的子表用法：

_$masterTable.jtable({
            title: app.localize('PharmacyInventory'),
            openChildAsAccordion: true,
            paging: true,
            actions: {
                listAction: {
                    method: _masterService.getItems
                }
            },

            fields: {
                id: {
                    key: true,
                    list: false
                },
                //...
                details: {
                    title: '',
                    width: '3%',
                    sorting: false,
                    edit: false,
                    create: false,
                    display: function (data) {
                        var master = data.record;
                        var $span = $('<span></span>');
                        var $btnView = $('<button class="btn btn-default btn-xs" title="' + app.localize('Details') + '"><i class="fa fa-align-justify"></i></button>')
                        .appendTo($span)
                        .click(function () {
                            $('#MasterTable').jtable('openChildTable',
                            $btnView.closest('tr'),
                            {
                                title: master.medicineName + "(" + master.pinYin + ")",
                                actions: {
                                    listAction: {
                                        method: _masterService.getSubItems
                                    }
                                },
                                fields: {
                                    productionDate:
                                    {
                                        title: app.localize('ProductionDate'),
                                        width: '10%',
                                        display: function (data) {
                                            var $span = $('<span></span>');
                                            $span.append(moment(data.record.productionDate).format('YYYY-MM-DD')+ " &nbsp; ");
                                            return $span;
                                        }
                                    },
                                    period:
                                    {
                                        title: app.localize('Period'),
                                        width: '10%'
                                    },
                                    effectiveDate: {
                                        title: app.localize('EffectiveDate'),
                                        width: '15%',
                                        display: function (data) {
                                            var $span = $('<span></span>');
                                            $span.append('<label class="font-red bold">' + moment(data.record.effectiveDate).format('YYYY-MM-DD') + "</label> &nbsp; ");
                                            return $span;
                                        }
                                    },
                                    batchNo: {
                                        title: app.localize('BatchNo'),
                                        width: '10%',
                                        display: function (data) {
                                            var $span = $('<span></span>');
                                            $span.append(data.record.batchNo + " &nbsp; ");
                                            return $span;
                                        }
                                    },
                                    stockBalance: {
                                        title: app.localize('PharmacyInventory'),
                                        width: '10%',
                                        display: function (data) {
                                        var $span = $('<span></span>');
                                        $span.append('<label class="font-red bold">' + data.record.stockBalance + "</label> &nbsp; ");
                                        return $span;
                                        }
                                    }
                                }
                            }, function (data) {
                                data.childTable.jtable('load', {
                                    sourceId: master.medicineID
                                });
                            });
                        });
                        return $span;
                    }
                },
                medicineName: {
                    title: app.localize('MedicineName'),
                    width: '15%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.medicineName + "(" + data.record.pinYin + ")" + " &nbsp; ");
                        return $span;
                    }
                },
                category: {
                    title: app.localize('Category'),
                    width: '10%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.categoryText + " &nbsp; ");
                        return $span;
                    }
                },
                dosage: {
                    title: app.localize('Dosage'),
                    width: '7%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.dosageText + " &nbsp; ");
                        return $span;
                    }
                },
                spec: {
                    title: app.localize('Spec'),
                    width: '7%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.specText + " &nbsp; ");
                        return $span;
                    }
                },
                minPacking: {
                    title: app.localize('MinPacking'),
                    width: '7%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.minPackingText + " &nbsp; ");
                        return $span;
                    }
                },
                unit: {
                    title: app.localize('Unit'),
                    width: '7%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.unitText + " &nbsp; ");
                        return $span;
                    }
                },
                limitation: {
                    title: app.localize('Limitation'),
                    width: '7%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.limitation + " &nbsp; ");
                        return $span;
                    }
                },
                usage: {
                    title: app.localize('Usage'),
                    width: '7%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.usageText + " &nbsp; ");
                        return $span;
                    }
                },
                route: {
                    title: app.localize('Route'),
                    width: '7%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.routeText + " &nbsp; ");
                        return $span;
                    }
                },
                stockBalance: {
                    title: app.localize('PharmacyInventory'),
                    width: '10%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append('<label class="font-red bold">' + data.record.stockBalance + "</label> &nbsp; ");
                        return $span;
                    }
                }
            }
        });

参考链接：http://www.codeproject.com/Articles/277576/AJAX-based-CRUD-tables-using-ASP-NET-MVC-and-jTa