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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/78149202

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭霖

Android ActionBar完全解析,使用官方推荐的最佳导航栏(上)

本篇文章主要内容来自于Android Doc,我翻译之后又做了些加工,英文好的朋友也可以直接去读原文。 Action Bar是一种新増的导航栏功能,在Andro...

30610
来自专栏张善友的专栏

Notepad2 一个很不错的记事本

有如下特性: 1、自定义语法高亮,支持HTML, XML, CSS, JavaScript, VBScript, ASP,PHP, CSS, Perl/CGI,...

2509
来自专栏佳爷的后花媛

前端面试题整理

两栏布局是主内容区为主,左(右)侧有一栏,(将侧边区块<aside>域浮动,<aside>浮动后覆盖绿色<main>, 再将<main> overflow:au...

4122
来自专栏偏前端工程师的驿站

JS魔法堂:再识IE的内存泄露

一、前言                               IE6~8除了不遵守W3C标准和各种诡异外,我想最让人诟病的应该是内存泄露的问题了。这阵子...

2465
来自专栏GIS讲堂

OpenLayers3基础教程——OL3 介绍control

相比较Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control:

1824
来自专栏WindCoder

Angular6自定义表单控件方式集成Editormd

曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑器玩,在网上也只找到一篇通过指令集成的,虽然可以实现,但...

4752
来自专栏思考的代码世界

Python网络数据采集之HTML解析|第01天

1614
来自专栏大内老A

来源于WCF的设计模式:可扩展对象模式[下篇]

在《来源于WCF的设计模式:可扩展对象模式》我通过一个简单的例子介绍了基于IExtensibleObject<T>和IExtension<T>这两个接口为核心的...

2638
来自专栏移动开发之家

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

 在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

2352
来自专栏向治洪

actionbar完全解析(一)

Action Bar是一种新増的导航栏功能,在Android 3.0之后加入到系统的API当中,它标识了用户当前操作界面的位置,并提供了额外的用户动作、界面导航...

21210

扫码关注云+社区

领取腾讯云代金券