bootstrap-table

bootstrap-table

1   数据转文字显示

{
    field: 'mtype',
    title: '数据类型',
    sortable: true,
    formatter: function(value, item, index) {
        if (item.mtype == 0) {
            return '拌合0';
        }else if (item.mtype == 1) {
            return '摊铺1';
        }else if (item.mtype == 2) {
            return '碾压2';
        }else if (item.mtype == 3) {
            return '回放3';
        }else if (item.mtype == 4) {
            return '运输车内场4';
        }else if (item.mtype == 5) {
            return '运输车5';
        }
    }
}


2 省略号显示长文本

{
    field: 'remark',
    title: '备注',
    cellStyle: cellStyles,
    titleTooltip:'remark'
}

function cellStyles (value, row, index,field) {
    return {
        css:{
            "min-width":"100px",
            "white-space":"nowrap",
            "text-overflow":"ellipsis",
            "overflow":"hidden",
            "max-width":"110px",
        }
    }
}

3 操作按钮

// 操作按钮
function btnGroup() {
    let html =
        '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default del-btn " title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
    return html;
}

{
    field: 'operate',
    title: '操作',
    formatter: btnGroup,  // 自定义方法
    events: {
        'click .edit-btn': function (event, value, row, index) {
            editUser(row);
        },
        'click .del-btn': function (event, value, row, index) {
            delUser(row);
        },
        'click .show-btn': function (event, value, row, index) {
            showBtn(row);
        },
        'click .show-btn3': function (event, value, row, index) {
            showBtn3(row);
        },
        'click .show-btn2': function (event, value, row, index) {
            showBtn2(row);
        }
    }
}

4 搜索

<div id="toolbar2" class="toolbar-btn-action2">
    <div class="my-container">
        <button id="btn_add" type="button" class="btn btn-primary m-r-5 btn-sm" onclick="addBtn()"
                data-target=".bs-example-modal-lg">
            <span class="mdi mdi-plus" aria-hidden="true"></span>新增
        </button>
    </div>
    <form id="serach_form" action="#!">
        <div class="my-container">
            <label class="myLabel-content">工程:</label>
            <div class="myText-content">
                <input id="engineer_id" name="engid" type="text" class="form-control"
                       placeholder="工程ID">
            </div>
        </div>
        <div class="my-container">
            <label class="myLabel-content">工区:</label>
            <div class="myText-content">
                <input id="work_area_id" name="secid" type="text" class="form-control"
                       placeholder="工区ID">
            </div>
        </div>

    </form>

    <div class="my-container">
        <button type="button" class="btn btn-info m-r-5 btn-sm" onclick="search()"> 搜索</button>
        <button type="button" class="btn btn-dark m-r-5 btn-sm" onclick="serach_form.reset()">重置
        </button>
    </div>
</div>