MiniUI自定義列內(nèi)容解決方案

背景

很多時候，我們需要自定義行內(nèi)容。

方案

這個時候，就需要自定義列內(nèi)容

源碼

<div id="datagridTable" class="mini-datagrid" style="width:100%;min-height: 300px;" allowResize="true" idField="id" multiSelect="true"
     showEmptyText="true" emptyText="您好:系統(tǒng)暫無數(shù)據(jù)，請新增！">
        <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>

// 自定義列內(nèi)容
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;
}

/*展示表單并回填數(shù)據(jù)到表單*/
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]);
        }
    }
    
}

結(jié)束

源碼中，操作列即可實現(xiàn)自定義列內(nèi)容