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]);
        }
    }
    
}

结束

源码中,操作列即可实现自定义列内容


猜你喜欢

转载自blog.51cto.com/zl0828/2116991