温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

MiniUI自定义列内容解决方案

发布时间:2020-06-06 13:37:18 来源:网络 阅读:2587 作者:沫沫金 栏目:web开发

背景

很多时候,我们需要自定义行内容。


方案

这个时候,就需要自定义列内容


源码

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

结束

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


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI