1. 程式人生 > >【沫沫金】miniui表格DataGrid動態Combobox功能實現

【沫沫金】miniui表格DataGrid動態Combobox功能實現

背景

業務需要,樹形表格每行可選一個下拉列,下拉資料依據行ID

效果

【沫沫金】miniui表格DataGrid動態Combobox功能實現
如上圖,每一行的批次列下拉框依據產品代號展示。

疑難

怎麼讓下拉根據行代號獲取資料?
想到兩種解決方案:1、初始化載入datagrid實現 2、點選的時候動態改變下拉combobox請求地址實現

方案1
嘗試了重繪單元格時動態設定請求地址,html程式碼是完成了,但是也上識別不出mini物件,根本彈不出;失敗
嘗試資料field內容設定為combobox內容,內容過去了,頁面沒下拉功能;失敗

方案2
點選時設定,事件好監控,問題是沒有獨立的Id無法使用“mini.get()”獲取到combobox元素,想設定有心無力。
過程中發現事件的e物件可以識別到當前行下標,行node都反查出來了,就是不知道怎麼拿combobx,費腦子的很。
繼續翻Api發現mini.getByName可以獲取到元素,就想試試。咱有下標啊,大不了定位唄,沒想到,還真成了。不僅拿到了,而且只有一個。被我發現了,行編輯當前只有一個在進行,其他的根本未啟用,應該是,因為只拿到當前行。

成功

總結

1、獲取datagrid行資料,使用mini.get("datagrid1").getSelect()
因為:不用和我一樣,根據單元格元素,獲取下標,在反查行,沒這麼麻煩,上面一節了當。

2、datagrid單元格編輯,必須開啟allowCellSelect="true" allowCellEdit="true" multiSelect="true" 元素必須開起<div property="editor">屬性
3、樹形grid複選框使用datagrid的,好處是使用mini.get("treeTable").getSelectedNodes()直接獲取一整行資料,方便。

原始碼如下:

&lt;div id="treeTable" class="mini-treegrid" treeColumn="product" idField="id" parentField="parentId" 

style="width: 100%; height:90%;" showTreeIcon="true" resultAsTree="false"
checkRecursive="false" value="11000514" expandOnLoad="3" allowCellSelect="true" allowCellEdit="true" multiSelect="true">
<div property="columns">
<div type="checkcolumn" width="50">選擇</div>
<div field="batchNumbers" renderer="onBatchNumberCombobox">批次
<div name="batchNumberCombobox" property="editor" class="mini-combobox" style="width:250px;" popupWidth="400" textField="ID" valueField="ID"
url="report/batchNumberList.action" value="" multiSelect="true" showClose="true" onbeforeshowpopup="beforeshowpopup" >'
<div property="columns">
<div header="批次號" field="ID"></div>
<div header="產品代號" field="TEXT"></div>
</div>
</div>
</div>
</div>
</div>

    function beforeshowpopup(e) {
    var treegrid = mini.get("treeTable");
    var rowNode = treegrid.getSelected();
    var bnc = mini.getByName("batchNumberCombobox");
    bnc.load("report/batchNumberList.action?productCode="+rowNode.productCode);
}

好了,今天就到這裡,給大家分享的miniui表格datagrid動態設定每行combobox下拉內容的關鍵點及思路,我是沫沫金,我在51cto。