MiniUI自定義列內容解決方案
阿新 • • 發佈:2018-05-16
MiniUI 自定義列背景
很多時候,我們需要自定義行內容。
方案
這個時候,就需要自定義列內容
源碼
<div id="datagridTable" class="mini-datagrid" style="width:100%;min-height: 300px;" allowResize="true" idField="id" multiSelect="true" showEmptyText="true" emptyText="您好:系統暫無數據,請新增!"> <div property="columns"> <div type="indexcolumn" width="10" headerAlign="center">序號</div> <div field="NAME" width="120" headerAlign="center" allowSort="false">車間名稱</div> <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">操作</div> </div> </div> // 自定義列內容 function onActionRenderer(e) { var grid = e.sender; var record = e.record; var uid = record._uid; var rowIndex = e.rowIndex; var s = '<a class="Edit_Button" href="javascript:upd(\'' + uid + '\')">編輯</a>' + '<a class="Delete_Button" href="javascript:del(\'' + uid + '\')">刪除</a>'; return s; } /*展示表單並回填數據到表單*/ function upd(row_uid){ var row = grid.getRowByUID(row_uid); if (row) { showOrhideForm(); var ret = row; for(var key in ret){ $('input[name="'+key+'"]').val(ret[key]); $('textarea[name="'+key+'"]').text(ret[key]); } } }
結束
源碼中,操作列即可實現自定義列內容
MiniUI自定義列內容解決方案