bootstrap table x-editable select2——带图标的选择

select2支持带图标的选择项，用Templating。

那么在bootstrap table中的x-editable怎样用呢？

先看动画和图片：

首先我们制作这些图标：

用excel做饼图——饼图拷入powerpoint——然后用powerpoint制作成透明图

制作透明图

做好的图标：

看看前端代码吧：

参考了：

x-editable的http://jsfiddle.net/wQysh/8/

bootstrap table的例子：#2314 Use
editable and formatter: https://jsfiddle.net/fsauter/5shvjxej/

select2的例子：https://select2.org/data-sources/ajax

<table id="table"
data-query-params="queryParams"
data-url="/getprogress"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-striped="true"
data-clickToSelect="true"
data-show-export="true"
data-filter-control="true"
>
<thead>
<tr>
<th>选择</th>
<th data-field="id" data-width="10" data-align="center" data-valign="middle">序号</th>
<!-- <th data-field="name" data-editable="true" data-editable-emptytext="For free." data-editable-display-formatter="nameFormatter">Price</th> -->
<th data-field="name1" data-editable="true" data-editable-emptytext="For free." data-editable-display-formatter="priceFormatter" data-align="center" data-align="center" data-valign="middle" data-title-tooltip="content">设计</th>
<th data-field="path1" data-editable="true" data-editable-emptytext="For free." data-editable-display-formatter="priceFormatter1" data-width="100" data-align="center" data-valign="middle">流程</th>
<th data-field="name2" data-editable="true" data-editable-emptytext="For free." data-editable-display-formatter="priceFormatter" data-width="10" data-align="center" data-valign="middle">校核</th>
<th data-field="path2" data-editable="true" data-editable-emptytext="For free." data-editable-display-formatter="priceFormatter1" data-width="100" data-align="center" data-valign="middle">流程</th>
<th data-field="name3" data-editable="true" data-editable-emptytext="For free." data-editable-display-formatter="priceFormatter" data-width="10" data-align="center" data-valign="middle">审查</th>
</tr>
</thead>
</table>

$(function (value, sourceData) {
$('#table').bootstrapTable({
idField: 'id',
uniqueId:'id',
// url: '/getprogress',///achievement/send/1
// striped: "true",
columns: [
{
checkbox:true,
width:10
},
{
// field: 'Number',
title: '序号',
formatter:function(value,row,index){
return index+1
}
},{
visible: true,
width:10,
editable: {
params:function(params) {
//originally params contain pk, name and value
var selectRow3=$('#table').bootstrapTable('getSelections');
var ids="";
for(var i=0;i<selectRow3.length;i++){
if(i==0){
ids=selectRow3[i].id;
}else{
ids=ids+","+selectRow3[i].id;
}
}
params.ids = ids;
return params;
},
type: 'select2',
select2: {
allowClear: true,
width: '150px',
placeholder: '请选择',
// multiple: true
placeholder: 'Select Task Progress',
// minimumInputLength: 0,
id: function (item) {
return item.Id;
},
ajax: {
url: '/getselect',//这里要修改一下
dataType: 'json',
data: function (term, page) {
return { query: term };
},
results: function (data, page) {
// alert(JSON.stringify(data));
return { results: data };
}
},
formatResult: function (item) {
// return item.Nickname;
// alert(item.name);
var baseUrl = "/static/img";
var $state = $('<span><img src="' + baseUrl + '/' + item.name1 + '.png" class="img-flag" width="20%"/> ' + item.content + '</span>');
return $state;
},
formatSelection: function (item) {
// alert(item.name);
// return item.name;
var baseUrl = "/static/img";
var $state = $('<span><img src="' + baseUrl + '/' + item.name1 + '.png" class="img-flag" width="20%"/> ' + item.content + '</span>');
return $state;
},
initSelection: function (element, callback) {//这个是默认值
// alert(JSON.stringify(element));
// alert(element.val());
// return {"Id":1,"name":"0","content":"未启动"}
return $.get('/getprogress1', { query:  element.val()}, function (data) {
// alert(JSON.stringify(data));
callback(data);
});
}
},//'/regist/getuname1',//这里用get方法，所以要换一个
pk: 1,
url: '/modifyprogress',
title: 'Enter Progress',
success: function(response, newValue) {
// alert(response.name);//这个是反馈回来的值
// alert(newValue);//这个是选择的顺序值
var selectRow3=$('#table').bootstrapTable('getSelections');
for(var i=0;i<selectRow3.length;i++){
alert(selectRow3[i].Id);
$('#table').bootstrapTable('updateByUniqueId', {
id: selectRow3[i].Id,
row: {
name1: response.name1
}
});
}
}
}
}
],
});
});

var scope = this;
scope.nameFormatter = function(value) {
var icon = $(this).data('pk') % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty';
var markup = '<i class="glyphicon ' + icon + '"></i> ' + value;
$(this).html(markup);
};

scope.priceFormatter = function(value) {
// alert(value);
if (value=="0"){
title="未开始"
}else if(value=="0.125"){
title="完成1/8"
}else if(value=="0.25"){
title="完成1/4"
}else if(value=="0.375"){
title="完成3/8"
}else if(value=="0.5"){
title="完成1/2"
}else if(value=="0.625"){
title="完成5/8"
}else if(value=="0.75"){
title="完成3/4"
}else if(value=="0.875"){
title="完成7/8"
}else if(value=="1"){
title="任务完成"
};
var color = '#' + Math.floor(Math.random() * 6777215).toString(16);
var markup = '<div title="' + title + '" style="color: ' + color + '">' + '<span><img src="/static/img/'  + value + '.png" class="img-flag" width="80%"/> </span></div>';
$(this).html(markup);
};

scope.priceFormatter1 = function(value) {
if (value=="dashed"){
title="未开始"
}else if(value=="solid"){
title="已开始"
}
var color = '#' + Math.floor(Math.random() * 6777215).toString(16);
var markup = '<div title="' + title + '" style="color: ' + color + '">' + '<span><img src="/static/img/'  + value + 'arrow-redd.png" class="img-flag" width="100%"/> </span></div>';
$(this).html(markup);
};

// $.fn.editable.defaults.mode = 'inline';
$.fn.editable.defaults.display = function(value, sourceData) {
var displayFormatterFunction = $(this).data('display-formatter');
if (displayFormatterFunction) {
scope[displayFormatterFunction].call(this, value, sourceData);
} else {
$(this).html(value);
}
};