Bootstrap-table 单元格formatter下拉复选框、五角星评价、输入框

目录

1、DWR+Bootstrap-table 初始化代码

2、五角星评价

3、多选下拉框select2

4、输入框

---

最近项目使用的是Bootstrap-table，但是又不使用editable，如何在单元格中嵌入我们想要的控件？使用formatter属性。

1、DWR+Bootstrap-table 初始化代码

js：

function queryreturnOrderTable(){
    $('#returnOrderTable').bootstrapTable('removeAll');// 加载前先清空数据
    $('#returnOrderTable').bootstrapTable('destroy');
    var contId = $("#contId").text();
    var arr = [];
// DWR服务端读取数据，用来给bootstrap适配
    CustContact.queryTask(contId, {
        callback: function (ret) {
            for (var i = 0; ret.dataList && i < ret.dataList.length; i++) {
                var obj = {}
                obj.cnt = ret.dataList[i][2];
                obj.aimDepIdName = ret.dataList[i][1];
                obj.aimDepId = ret.dataList[i][0];
                arr.push(obj)
            }
        }, async: false
    });
    // 回单质量评价列表初始化
    $('#returnOrderTable').bootstrapTable({
        // 加载表格时设置查询参数
        columns: [
            {field: 'access', title: '评价', align: 'center', width: '250px', formatter: orderStarForm},
            {field: 'disagree', title: '不满意原因', width:'350px', align : 'center' ,valign : 'middle', formatter: orderSelectForm},
            {field: 'reason', title: '不满意原因补充说明', width:'350px', align : 'center', valign : 'middle', formatter: orderInputForm}
        ],
        data: arr
    });
    initSelect(arr);
}

html：

<table id="returnOrderTable"
                               class="table table-hover fjNet-table"
                               data-show-allexport="true"
                               data-show-currexport="true"
                               data-show-print="true"
                               data-query-params-type="" data-side-pagination="server"
                               data-show-columns="true"
                               data-show-wait-message="false">
                            <thead>
                            <tr>
                            </tr>
                            </thead>
                        </table>

2、五角星评价

// 五角星评价
orderStarForm = function (value,row,index) {
    var html = '<div style="width: 100%;">' +
        '<ul id="accessUl' + row.aimDepId + '" class="accessUl cleanfloat" onmouseover="ulClick('+row.aimDepId+',this)">';
    html += '<li class="floatLi">&#9733;</li>' +
            '<li class="floatLi">&#9733;</li>' +
            '<li class="floatLi">&#9733;</li>' +
            '<li class="floatLi">&#9733;</li>' +
            '<li class="floatLi">&#9733;</li></ul>' +
            '<span id="obstacleSpan' + row.aimDepId + '" style="line-height: 35px;">请评价</span></div>';
    return html;
}

// 五角星评价点击事件 五星好评不需要选择另外控件
ulClick = function (aimDepId, obj) {
    $("ul#accessUl" + aimDepId + " li").click(function () {
        $(this).addClass('cs');
        $(this).prevAll().addClass('cs');
        $(this).nextAll().removeClass('cs');
        // 点亮几颗星就有几个class
        if ($("#accessUl" + aimDepId + " .cs").length == 5) {
            $("#obstacleSpan" + aimDepId).text("满意");
            $("#sel_search_orderstatus" + aimDepId).attr("disabled",true);
            $("#plan" + aimDepId).attr("disabled",true);
            $("#sel_search_orderstatus" + aimDepId).select2('val', "");
            $("#plan" + aimDepId).val("");
        } else {
            $("#obstacleSpan" + aimDepId).text("不满意");
            $("#sel_search_orderstatus" + aimDepId).attr("disabled",false);
            $("#plan" + aimDepId).attr("disabled",false);
        }
    });
}

由于Bootstrap-table使用formatter无法直接使用

$("#returnOrderTable").bootstrapTable('getData')

获取到自定义控件的数据，所以这里我使用id给每一行数据的控件左边，再循环获取数据。
 

3、多选下拉框select2

// 多选下拉框
orderSelectForm = function(value,row,index) {
    return '<select style="width: 100%;" multiple="multiple" id="sel_search_orderstatus' + row.aimDepId + '">'
        '</select>';
}

initSelect = function (arr) {
    var newProducts = [
        {id : '回单不及时',
            text : '回单不及时'},
        {id : '回单不准确',
            text : '回单不准确'},
        {id : '回单不完整',
            text : '回单不完整'},
        {id : '无效回单',
            text : '无效回单'}];
    for (var i = 0; i < arr.length; i++) {
        $("#sel_search_orderstatus" + arr[i].aimDepId).select2();
// 适配数据
        $("#sel_search_orderstatus" + arr[i].aimDepId).select2({
            data: newProducts
        });
    }

}

4、输入框

// 不满意原因补充说明
orderInputForm = function(value,row,index){
    return '<input type="text" class="form-control" style="width: 100%" ' +
        'name="reason" id="plan' + row.aimDepId + '" />';
}

 附上css

    .cleanfloat::after{display: block; float:left; clear: both; content:""; visibility: hidden; height: 0;}
    .floatLi { float:left}
    .accessUl{list-style:none; float:left; font-size:22px; margin-right:5px; color:#ccc; cursor:pointer;}
    .hs,.cs{color:#eea236;}

 有更好方法或者问题，欢迎留言讨论。