Kendo UI网格与Oblect ID翻译

Question

我想通过JSON（php + mysql引擎）从表A和这些数据的列之一，使用外部数据与KendoUI的网格，从另一个表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> 

我怎样才能让我在编辑模式下做同样的事情，在视图模式？

Answer 1

为了实现这一目标，你必须首先编辑读取操作的查询看到你的样本数据，必须是这样的

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说明命名

Answer 2

我知道你问的是HTML/JavaScript的方式，但使用MVC，这是做的好，另一种方式：

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