2015-10-27 60 views
0

仍然試圖與Dgrid(0.4)和dojo(1.10)一起工作,我現在有另一個選擇問題。Dgrid +選擇問題

我的網頁包含一個當你點擊一個按鈕時打開的對話框。 在這個對話框中,我們有下面的代碼,它顯示一個網格,數據通過Json HTTP頁面來自數據庫。這工作正常,甚至排序和查詢過濾。

我想知道的是允許用戶雙擊一行,獲取選中的行ID包含在第一列以更新主頁面中的表格。我爲此使用了dgrid/selection。但是,它總是返回網格的最後一行,而不是用戶選擇的那一行。

選擇代碼是基於這樣的: http://dgrid.io/tutorials/0.4/hello_dgrid/

任何想法?

感謝

 <script language="javascript"> 

     require 
     (
      [ 
       "dojo/_base/declare", 
       "dojo/_base/array", 
       "dgrid/OnDemandList", 
       "dgrid/OnDemandGrid", 
       "dgrid/Keyboard", 
       "dgrid/Selection", 
       "dgrid/Editor", 
       "dgrid/extensions/ColumnHider", 
       "dstore/Memory", 
       "dstore/RequestMemory", 
       "dojo/_base/lang", 
       "dojo/dom-construct", 
       "dojo/dom", 
       "dojo/on", 
       "dojo/when", 
       "dojo/query", 
       "dojo/store/Observable", 
       "dstore/Rest", 
       "dojo/_base/Deferred", 
       "dojo/store/Cache", 
       "dojo/domReady!", 
      ], 
      function(
       declare, arrayUtil, OnDemandList, OnDemandGrid, Keyboard, Selection, Editor, ColumnHider, Memory, RequestMemory, lang, ObjectStore, dom, on, when, query, Observable, Rest, Deferred 
      ){ 
       var fform = dom.byId("filterForm"); 
       var ContactColumns = [ 
         { label: "", field: "contact_id", hidden: true, unhidable: true}, 
         { label: "Company Name", field: "company_name", unhidable: true }, 
         { label: "Contact Name", field: "contact_name", unhidable: true }, 
         { label: "Email", field: "contact_email", unhidable: true } 
       ]; 

       var ContactGrid=declare([OnDemandGrid, Keyboard, Selection,ColumnHider]); 

       var contactlist = new Observable(new Rest({ target: './ajax.contactsLoader.php' })); 
       var selection = []; 

       window.contactgrid = new ContactGrid(
        { 
         className: "dgrid-selectors", 
         collection: contactlist, 
         maxRowsPerPage:10, 
         selectionMode: 'single', 
         cellNavigation: false, 
         columns: ContactColumns 
        }, "contacttable" 
       ); 

       on(fform, "submit", function (event) { 
         var cpy_filter = fform.elements.fcompany_name.value; 
         var ct_filter = fform.elements.fcontact_name.value; 
         var email_filter = fform.elements.fcontact_email.value;            
        contactgrid.set('collection',contactlist.filter({contact_name: ct_filter, company_name: cpy_filter, contact_email: email_filter })); 
         contactgrid.refresh(); 
         event.preventDefault(); 
       }); 

      contactgrid.on('dgrid-select', function (event) { 
       // Report the item from the selected row to the console. 
       console.log('Row selected: ', event.rows[0].data); 
      }); 
      contactgrid.on('dgrid-deselect', function (event) { 
       console.log('Row de-selected: ', event.rows[0].data); 
      }); 
      contactgrid.on('.dgrid-row:click', function (event) { 
       var row = contactgrid.row(event); 
       console.log('Row clicked:', row.data); 
      }); 


      }  
     ); 
     </script>    

<div class="dijitDialogPaneContentArea" style="width:96%;margin-left:5px"> 
    <form id="filterForm">   
     <div class="dijitDialogPaneActionBar" > 
    <button   data-dojo-type="dijit.form.Button" type="submit">Filter</button>   
     <button 
      data-dojo-type="dijit.form.Button" 
      data-dojo-attach-point="submitButton" 
      type="submit" 
     > 
      Select 
     </button> 

     <button 
      data-dojo-type="dijit.form.Button" 
      data-dojo-attach-point="cancelButton" 
     > 
      Close 
     </button> 

     </div> 


     <div data-dojo-attach-point="contentNode" > 
     <input type="text" data-dojo-type="dijit.form.TextBox" name="fcompany_name" id="fcompany_name" style="width:33%"> 
     <input type="text" data-dojo-type="dijit.form.TextBox" name="fcontact_name" id="fcontact_name" style="width:32%"> 
     <input type="text" data-dojo-type="dijit.form.TextBox" name="fcontact_email" id="fcontact_email" style="width:33%"> 

     <div id="contacttable"> 
     </div> 
     </div> 

    </form> 
</div> 
+0

您能否提供您的REST端點返回的內容的示例? 「它總是返回網格的最後一行而不是用戶選擇的那一行」聽起來像這可能是沒有適當的唯一標識符的項目的問題。 –

回答

0

剛剛發現的原因。 這些列需要有一個名爲ID的「id」列。我只需將'contact_id'列更改爲'id'即可。

謝謝

+0

不需要將'field'改爲'id'。你也可以在你的集合上設置'idProperty'。只要給它與所需的'field'同名即可。像'idProperty:contact_id'。 – Himanshu