1

我正在尝试使用 KendoUI 通过表 A 中的 JSON（php+mysql 引擎）和这些数据的其中一列的外部数据创建一个网格，从另一个表 B 获取文本标签。

例如，数据是：idPermission=1, user_id=1, business_unit_id=1,permission=10

我user_id=1想从另一个表（Users）中得到他们的名字1=John Doe，，2=Martin Brown。

我想在网格的可视化中看到“John Doe”而不是 id 1，而“Martin Brown”而不是 id 2。当我已经达到目标的记录的内联（或弹出）编辑时，我有一个选择带有名称而不是 ID 的框！

这是我的代码：

    <script>
    $(function() {

        var crudServiceBaseUrl = "http://localhost/ajax/";
        var dataTable = "UsersPermissions"; 

        // This is the datasource of the grid
        dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "table_action.php?op=R&tbl="+dataTable,
                    dataType: "json"
                },
                update: {
                    url: crudServiceBaseUrl + "table_action.php?op=U&tbl="+dataTable,
                    type: "POST"
                },
                destroy: {
                    url: crudServiceBaseUrl + "table_action.php?op=D&tbl="+dataTable,
                    type: "POST"
                },
                create: {
                    url: crudServiceBaseUrl + "table_action.php?op=C&tbl="+dataTable,
                    type: "POST"
                }
            },
            batch: true,
            pageSize: 10,
            schema: {
                model: {
                    id: "idPermission",
                    fields: {
                        idPermission: { editable: false, nullable: true },
                        user_id: { validation: { required: true } },
                        business_unit_id: {},
                        permission: { validation: { required: true } },
                    }
                }
            }
        });

        // This is the datasource of the user_id column
        usersSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "table_action.php?op=R&tbl=Users",
                    dataType: "json"
                }
            },
            batch: true,
            schema: {
                model: {
                    id: "idUser",
                    fields: {
                        idUser: {},
                        email: {},
                        password: {},
                        name: {},
                        last_login: {},
                        status: {}
                    }
                }
            }
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            reorderable: true,
            resizable: true,
            scrollable: false,
            toolbar: ["create"],
            columns: [
                {                    
                    field: "user_id",
                    editor: function (container, options) {     // This is where you can set other control types for the field.                                                                   
                        $('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
                            dataSource: usersSource,
                            dataValueField: "idUser",
                            dataTextField: "name",                            
                        });
                    },
                    title: "ID Utente"
                },
                { field: "business_unit_id", title: "Business Unit"},
                { field: "permission", title: "Permission"},
                { command: ["edit", "destroy"], width: "230px"}],
            editable: "inline"
        });

    });

</script>

我怎样才能在编辑模式和查看模式下做同样的事情？

4

2 回答 2

0

为了实现这一点，您必须首先编辑读取操作的查询，查看您的示例数据，它必须是这样的

SELECT  a.idPermission, b.name, a.business_unit_id, a.permission 
FROM TABLE_A AS a 
JOIN TABLE_B(users) AS B ON a.user_id=b.user_id;

json 对数据进行编码并发送到客户端

并在您的剑道网格中将列 user_id 更改为 name

于 2013-02-15T14:26:24.503 回答
0

我知道您在询问 HTML/JavaScript 方式，但使用 MVC，这是一种很好的替代方式：

http://decisivedata.net/kendo-ui-grid-and-entity-framework-code-first-foreign-key-fields/

于 2014-07-31T00:07:38.740 回答