在子行中编辑父元素/子元素

var rowData = row.data();
var usersEditor = new $.fn.dataTable.Editor( {
    ajax: {
        url: '/media/blog/2016-03-25/users.php',
        data: function ( d ) {
            d.site = rowData.id;
        }
    },
    table: table,
    fields: [ {
            label: "First name:",
            name: "users.first_name"
        }, {
            label: "Last name:",
            name: "users.last_name"
        }, {
            label: "Phone #:",
            name: "users.phone"
        }, {
            label: "Site:",
            name: "users.site",
            type: "select",
            placeholder: "Select a location",
            def: rowData.id
        }
    ]
} );

数据表的配置

DataTable 配置几乎与其他基本 DataTable 相同，同样修改为使用 ajax.data 发送父行的 ID，以确保仅加载属于该父行的行

var usersTable = table.DataTable( {
    pageLength: 5,
    ajax: {
        url: '/media/blog/2016-03-25/users.php',
        type: 'post',
        data: function ( d ) {
            d.site = rowData.id;
        }
    },
    columns: [
        { title: 'First name', data: 'users.first_name' },
        { title: 'Last name', data: 'users.last_name' },
        { title: 'Phone #', data: 'users.phone' },
        { title: 'Location', data: 'sites.name' }
    ],
    select: true,
    layout: {
        topStart: {
            buttons: [
                { extend: 'create', editor: usersEditor },
                { extend: 'edit',   editor: usersEditor },
                { extend: 'remove', editor: usersEditor }
            ]
        }
    }
} );

我们还使用 pageLength 使子行中的页面大小保持较小，但你可以根据需要进行设置。事实上，这突出了子行中的 Editor 和 DataTable 仅仅是常规组件，并且可以使用针对每种组件（如任何其他 Editor 和 DataTable）的任何选项、事件和 API 进行修改。

更新父表

修改子表后，可能需要在一个或多个行中更新父表的Users 计数。为此，我们使用 ajax.reload() 方法（通过传入函数的 row 变量进行访问 - 回想一下 DataTables 的链式 API 允许在所有级别访问顶级方法）

usersEditor.on( 'submitSuccess', function (e, json, data, action) {
    row.ajax.reload(function () {
        $(row.cell( row.id(true), 0 ).node()).click();
    });
} );

上面的第 3 行使用一个合成的 click 事件来触发子行的“显示”操作，因为 Ajax 重新加载会导致其自动关闭（它实际上是一个新添加的行）。这可以通过从服务器获取新的计数并使用 row().data() 为每个行更新数据来提高效率，但这超出了本文的范围。

服务器端 (PHP)

尽管在客户端我们可以随时初始化并显示多个子 Editor，但在服务器端我们只需要一个脚本，它将通过父 ID（即网站）区分 Editor。这是使用已提交的 site 参数和 WHERE 条件 来实现的

if ( ! isset($_POST['site']) || ! is_numeric($_POST['site']) ) {
    echo json_encode( [ "data" => [] ] );
}
else {
    Editor::inst( $db, 'users' )
        ->field( 
            Field::inst( 'users.first_name' ),
            Field::inst( 'users.last_name' ),
            Field::inst( 'users.phone' ),
            Field::inst( 'users.site' )
                ->options( 'sites', 'id', 'name' )
                ->validator( 'Validate::dbValues' ),
            Field::inst( 'sites.name' )
        )
        ->leftJoin( 'sites', 'sites.id', '=', 'users.site' )
        ->where( 'site', $_POST['site'] )
        ->process($_POST)
        ->json();
}

将它们连接在一起

只剩余一个步骤 - 当在父表中更新站点标签时，我们需要在子表中反映这一点。我们可以使用子表的 ajax.reload() 函数来实现这一点

function updateChild ( row ) {
    $('table', row.child()).DataTable().ajax.reload();
}

可以使用以下方式调用该函数

siteEditor.on('submitSuccess', function () {
    siteTable.rows().every(function () {
        if (this.child.isShown()) {
            updateChild(this);
        }
    });
} );

如果您想要查看本文中使用的完整 Javascript，请 点击此处。还可以使用 CSS，尽管它仅适用于行详细信息按钮和突出显示子行。

后续步骤

我希望你从这篇文章中了解到，子行显示不必局限于 基本示例 中的静态数据。你可以将任何所需的交互性添加到子行中，包括一个全面的可编辑 DataTable！