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

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