1. 程式人生 > >MiniUI自定義列內容解決方案

MiniUI自定義列內容解決方案

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自定義列內容解決方案