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/