在浏览器里做出EXCEL的效益,复制、粘贴、设置公式、双击编辑等成效,假如谐和开垦来讲,相比麻烦,提出选择成熟的插件。这里介绍使用智表ZCELL插件,完毕用户火速操作。

选择bootstraptable插件实现表格记录的查询、分页、排序操作,bootstraptable插件

在事情种类开荒中,对表格记录的查询、分页、排序等管理是可怜广阔的,在Web开辟中,能够动用诸多成效庞大的插件来满意要求,且能小幅的增长开采功用,本小说介绍那些bootstrap-table是一款相当盛名的开源表格插件,在多数系列江苏中国广播公司大的利用。Bootstrap-table插件提供了非凡丰裕的性质设置,能够达成查询、分页、排序、复选框、设置显示列、Cardview视图、主从表呈现、合并列、国际化管理等拍卖作用,而且该插件同时也提供了一些毋庸置疑的恢宏效用,如运动行、移动列地方等局地奇特的效果,插件能够用基于HTML5的data-*个性标记设置,也能够使用Javascript格局开始展览设置,非凡有益。本篇小说介绍bootstrap-table插件在自己实际项目中的应用情状,计算相关应用中蒙受的主题素材管理经验。

一、Bootstrap-table财富及使用介绍

在GitHub上Bootstrap-table的源码地址是:

Bootstrap-table的文书档案地址:

Bootstrap-table的种种样例:

Bootstrap-Table呈现数据到表格的措施有二种,一种是客户端(client)方式,1种是服务器(server)格局。

  所谓客户端情势,指的是在服务器中把要来获得表格的多少一回性加载出来,然后转变到JSON格式传到要出示的分界面中,客户端情势较为轻巧,它是把数量3次性加载出来放到分界面上,然后根据你设置的每页记录数,自动生成分页。当点击第3页时,会自行加载出多少,不会再向服务器发送请求。同时用户能够采用其自带的探求效果,能够兑现全部据检索。对于数据量较少的时候,能够应用这几个法子。

  所谓服务器方式,指的是依据设定的每页记录数和当下要展现的页码,发送数据到服务器实行查询,然后再呈现到表格中。该办法能够依照用户的必要动态的加载数据,节省了服务器的财富,不过不能够应用其自带的全部据检索功效。

Bootstrap-table是基于Boostrap开辟的插件,因而使用的时候,供给引进Bootstrap的台本和样式。

假如大家项目中并没有引进相关的文书,则需要引进那么些样式松阳高腔本文件,如下所示。

永利开户送38元体验金 1

<link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

只是上述内容,在大家付出项目标时候都必将有个别了,所以大家依然把基本放到使用那几个插件所须要的引进文件上来。

CSS文件引进

<link rel="stylesheet" href="bootstrap-table.css" rel="external nofollow" >

剧本文件引进

<script src="bootstrap-table.js"></script>
<--汉化文件,放在 bootstrap-table.js 后面-->
<script src="bootstrap-table-zh-CN.js"></script>

 一般的话大家只若是依赖MVC开采的种类,CSS和JS的代码,都以坐落BundleConfig.cs里面开头化的,如下所示

bootstrap-table在页面中的使用,能够分成两种,一种是纯粹用HTML5的写法,通过data-*的方法钦点各个质量设置,壹种是HTML+JS格局达成弹性装置。

万1大家应用HTML5标记的秘诀开始化HTML代码,则是底下的代码。

<table data-toggle="table" data-url="data1.json">
 <thead>
  <tr>
   <th data-field="id">Item ID</th>
   <th data-field="name">Item Name</th>
   <th data-field="price">Item Price</th>
  </tr>
 </thead>
</table>

只要我们采用JS代码情势来初叶化表格插件,那么只需求在HTML上声称一个报表对象就可以,如下代码。

<table id="table"></table>

下一场简短的JS代码开头化如下所示

$('#table').bootstrapTable({
 url: 'data1.json',
 columns: [{
  field: 'id',
  title: 'Item ID'
 }, {
  field: 'name',
  title: 'Item Name'
 }, {
  field: 'price',
  title: 'Item Price'
 }, ]
});

而是实在大家应用
bootstrap-table的JS配置效益肯定比这一个复杂多数,下边界面效果是实际表的数目体现。

永利开户送38元体验金 2

贰、bootstrap-table的事无巨细使用

一)整个JS属性配置

在上航海用教室中,我们是应用JS格局开始展览早先化表格内容的,JS代码如下所示

 var $table;
  //初始化bootstrap-table的内容
  function InitMainTable () {
   //记录页面bootstrap-table全局变量$table,方便应用
   var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
   $table = $('#grid').bootstrapTable({
    url: queryUrl,      //请求后台的URL(*)
    method: 'GET',      //请求方式(*)
    //toolbar: '#toolbar',    //工具按钮用哪个容器
    striped: true,      //是否显示行间隔色
    cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
    pagination: true,     //是否显示分页(*)
    sortable: true,      //是否启用排序
    sortOrder: "asc",     //排序方式
    sidePagination: "server",   //分页方式:client客户端分页,server服务端分页(*)
    pageNumber: 1,      //初始化加载第一页,默认第一页,并记录
    pageSize: rows,      //每页的记录行数(*)
    pageList: [10, 25, 50, 100],  //可供选择的每页的行数(*)
    search: false,      //是否显示表格搜索
    strictSearch: true,
    showColumns: true,     //是否显示所有的列(选择显示的列)
    showRefresh: true,     //是否显示刷新按钮
    minimumCountColumns: 2,    //最少允许的列数
    clickToSelect: true,    //是否启用点击选中行
    //height: 500,      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
    uniqueId: "ID",      //每一行的唯一标识,一般为主键列
    showToggle: true,     //是否显示详细视图和列表视图的切换按钮
    cardView: false,     //是否显示详细视图
    detailView: false,     //是否显示父子表
    //得到查询的参数
    queryParams : function (params) {
     //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
     var temp = { 
      rows: params.limit,       //页面大小
      page: (params.offset / params.limit) + 1, //页码
      sort: params.sort,  //排序列名 
      sortOrder: params.order //排位命令(desc,asc) 
     };
     return temp;
    },
    columns: [{
     checkbox: true, 
     visible: true     //是否显示复选框 
    }, {
     field: 'Name',
     title: '姓名',
     sortable: true
    }, {
     field: 'Mobile',
     title: '手机',
     sortable: true
    }, {
     field: 'Email',
     title: '邮箱',
     sortable: true,
     formatter: emailFormatter
    }, {
     field: 'Homepage',
     title: '主页',
     formatter: linkFormatter
    }, {
     field: 'Hobby',
     title: '兴趣爱好'
    }, {
     field: 'Gender',
     title: '性别',
     sortable: true
    }, {
     field: 'Age',
     title: '年龄'
    }, {
     field: 'BirthDate',
     title: '出生日期',
     formatter: dateFormatter
    }, {
     field: 'Height',
     title: '身高'
    }, {
     field: 'Note',
     title: '备注'
    }, {
     field:'ID',
     title: '操作',
     width: 120,
     align: 'center',
     valign: 'middle',
     formatter: actionFormatter
    }, ],
    onLoadSuccess: function () {
    },
    onLoadError: function () {
     showTips("数据加载失败!");
    },
    onDblClickRow: function (row, $element) {
     var id = row.ID;
     EditViewById(id, 'view');
    },
   });
  };

地点JS代码的布局属性,基本上都加了疏解表达,是相比较便于精通的了。

2)查询及分页

此地的表格数据分页是行使服务器分页的办法,依据查找条件从服务器再次回到数据记录的,并使用了排序的管理方式,这里的queryParams参数就是交给到服务器端的参数了           

 //得到查询的参数
    queryParams : function (params) {
     //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
     var temp = { 
      rows: params.limit,       //页面大小
      page: (params.offset / params.limit) + 1, //页码
      sort: params.sort,  //排序列名 
      sortOrder: params.order //排位命令(desc,asc) 
     };
     return temp;
    },

除此以外大家看到重回数据的U普拉多L地址接口是FindWithPager,大家来探视那些MVC调节器方法是什么样管理数据重回的。

/// <summary>
  /// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
  /// </summary>
  /// <returns>指定对象的集合</returns>
  public override ActionResult FindWithPager()
  {
   //检查用户是否有权限,否则抛出MyDenyAccessException异常
   base.CheckAuthorized(AuthorizeKey.ListKey);

   string where = GetPagerCondition();
   PagerInfo pagerInfo = GetPagerInfo();
   var sort = GetSortOrder();

   List<TestUserInfo> list = null;
   if (sort != null && !string.IsNullOrEmpty(sort.SortName))
   {
    list = baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);
   }
   else
   {
    list = baseBLL.FindWithPager(where, pagerInfo);
   } 

   //Json格式的要求{total:22,rows:{}}
   //构造成Json的格式传递
   var result = new { total = pagerInfo.RecordCount, rows = list };
   return ToJsonContent(result);
  }

上边代码管理了四个部分的对象音讯,3个是分页实体类音讯,二个是排序音信,然后依照那么些条件获得记录,重回类似
{total:22,rows:{}}

格式的JSON数据记录。          

var result = new { total = pagerInfo.RecordCount, rows = list };
   return ToJsonContent(result);

获取分页的参数消息如下所示      

 /// <summary>
  /// 根据Request参数获取分页对象数据
  /// </summary>
  /// <returns></returns>
  protected virtual PagerInfo GetPagerInfo()
  {
   int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
   int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);

   PagerInfo pagerInfo = new PagerInfo();
   pagerInfo.CurrenetPageIndex = pageIndex;
   pagerInfo.PageSize = pageSize;
   return pagerInfo;
  }

获得排序参数音信的代码如下所示

 /// <summary>
  /// 获取排序的信息
  /// </summary>
  /// <returns></returns>
  protected SortInfo GetSortOrder()
  {
   var name = Request["sort"];
   var order = Request["sortOrder"];
   return new SortInfo(name, order);
  }

最终正是现实贯彻具体条件、具体页码、具体排序条件下的多少记录了,那有些能够依据自个儿的须要贯彻逻辑,这里只是给出八个包装好的处理调用就能够。

baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);

其实况况下,大家列表的显得,一般须求利用分歧的口径实行数据的查询的,固然那些Bootstrap-table控件提供了二个暗中同意的询问开关,然则貌似是在客户端分页的情景下利用,而且略显轻易,大家一般选用本人查询条件进行拍卖,如下界面所示。

永利开户送38元体验金 3

抑或正如的

永利开户送38元体验金 4

那正是说那样对于地点的js属性就须要调动下收受询问条件参数queryParams
了            

 //得到查询的参数
    queryParams : function (params) {
     //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
     var temp = { 
      rows: params.limit,       //页面大小
      page: (params.offset / params.limit) + 1, //页码
      sort: params.sort,  //排序列名 
      sortOrder: params.order //排位命令(desc,asc) 
     };
     return temp;
    },

对于自定义查询条件,大家得以用下边包车型客车例行方法扩充参数,如下所示

永利开户送38元体验金 5

但是查询条件的参数大家不方便人民群众1一设置,大家想透过1种较为快捷的诀窍来拍卖,那么就须求对这一个处理格局进行2个尤其的变更了,首先增加三个恢弘函数来拍卖表单的规范化

 //自定义函数处理queryParams的批量增加
  $.fn.serializeJsonObject = function () {
   var json = {};
   var form = this.serializeArray();
   $.each(form, function () {
    if (json[this.name]) {
     if (!json[this.name].push) {
      json[this.name] = [json[this.name]];
     }
     json[this.name].push();
    } else {
     json[this.name] = this.value || '';
    }
   });
   return json;
  }

然后我们就足以批量拍卖表单的查询条件了        

 queryParams : function (params) {
     //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
     var temp = $("#ffSearch").serializeJsonObject();
     temp["rows"] = params.limit;      //页面大小
     temp["page"] = (params.offset / params.limit) + 1; //页码
     temp["sort"] = params.sort;       //排序列名
     temp["sortOrder"] = params.order;     //排位命令(desc,asc) 

     //特殊格式的条件处理
     temp["WHC_Age"] = $("#WHC_Age").val() + "~" + $("#WHC_Age2").val();
     temp["WHC_BirthDate"] = $("#WHC_BirthDate").val() + "~" + $("#WHC_BirthDate2").val();

     return temp;
    },

然后后端统一根据逻辑处理查询参数就可以。

3)格式化输出函数及其余

永利开户送38元体验金,对于地点JS的安顿消息,大家再来回看一下,举例对于数据转义函数,能够格式化输出的剧情的,如下界面代码。

永利开户送38元体验金 6

格式化的数据转义函数如下,重要正是根据剧情实行格式化输出的JS函数,好像是急需放在三个文书内。

 //连接字段格式化
  function linkFormatter(value, row, index) {    
   return "<a href='" + value + "' title='单击打开连接' target='_blank'>" + value + "</a>";
  }
  //Email字段格式化
  function emailFormatter(value, row, index) {
   return "<a href='mailto:" + value + "' title='单击打开连接'>" + value + "</a>";
  }
  //性别字段格式化
  function sexFormatter(value) {
   if (value == "女") { color = 'Red'; }
   else if (value == "男") { color = 'Green'; }
   else { color = 'Yellow'; }

   return '<div style="color: ' + color + '">' + value + '</div>';
  }

此外,我们看出游记录的结尾扩大了多少个操作按键,方便对当下记下的查看、编辑和删除操作,如下效果图所示。

永利开户送38元体验金 7

那一部分我们也是因而格式化函数举行拍卖的

永利开户送38元体验金 8

 //操作栏的格式化
  function actionFormatter(value, row, index) {
   var id = value;
   var result = "";
   result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'></a>";
   result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'></a>";
   result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'></a>";
   return result;
  }

 永利开户送38元体验金 9

只要我们须要双击弹出编辑分界面包车型客车层,我们得以管理表格的双击事件,如下代码所示。

      onDblClickRow: function (row, $element) {
          var id = row.ID;
          EditViewById(id, 'view');
        },

设若大家需求设置行的不一致的体裁呈现,能够通过扩展rowStyle的JS管理函数就可以,如下代码所示

       rowStyle: function (row, index) { //设置行的特殊样式
          //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
          var strclass = "";
          if (index == 0) {
            strclass = "warning";
          }
          return { classes: strclass }
        }

 对于表格记录的获得,大家能够通过下边包车型客车代码举办获取:$table.bootstrapTable(‘getSelections’)

      var rows = $table.bootstrapTable('getSelections');
      if (rows.length > 0) {
        ID = rows[0].ID;
      }

万①是多条记下的拍卖,举例删除记录

    //实现删除数据的方法
    function Delete() {
      var ids = "";//得到用户选择的数据的ID
      var rows = $table.bootstrapTable('getSelections');
      for (var i = 0; i < rows.length; i++) {
        ids += rows[i].ID + ',';
      }
      ids = ids.substring(0, ids.length - 1);
      DeleteByIds(ids);
    }

若果必要安装显示列显示,如下界面所示

永利开户送38元体验金 10

以及排序管理

永利开户送38元体验金 11

那几个必要在JS代码开启相关的习性就能够。

永利开户送38元体验金 12

再有正是1种CardView的卡牌视图格式,如下所示。

永利开户送38元体验金 13

别的1种是父亲和儿子表的进展明细的格式,如下所示

永利开户送38元体验金 14

 以上就是bootstrap-table插件在笔者实在项目中的应用景况,基本上对JS各类属性的选拔实行了一部分介绍了,具体的施用大家能够参照他事他说加以调查它的文书档案,获取对应属性、方法、事件的详尽表明,那样咱们就能够进一步详细的选取那些插件的各个功用了。

 

总结

以上所述是笔者给大家介绍的施用bootstraptable插件达成表格记录的询问、分页、排序操作,希望对大家全体扶助,要是大家有任何难题欢迎给本身留言,我会及时恢复我们的!

在职业系统开垦中,对表格记录的询问、分页、排序等管理是…

     首先下载插件,引入到页面中,一共几个公文,包蕴jquery
基础文件,插件和体裁文件。

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script type="text/javascript" src="zcell/ZCell.min.js"></script>
<script type="text/javascript" src="zcell/ZCell.register.js"></script>

 <link rel="stylesheet" type="text/css" href="zcell/ZCell.css" />

  

文件引进后,分界面加载,筹划数据

//页面加载时,执行
var zcell1;

//准备数据源
var jsondata = [//四行五列
["", "", "", "", "", ""],
["", "", "", "", "", ""],
["", "", "", "", "", ""],
["■合并单元格", "单位", "综合取值", "费用", "E1", "F1"],
["", "", "", "机械费", "材料费", "人工费"],
["■计算公式", "合计", "", "30", "40", "50","公式支持加减乘除和自定义函数"],
["", "分公司1", "", "300", "5.2375", "28.2345",""],
["", "分公司2", "", "600", "13.232", "58.14298"]

];

  然后在页面加载时,生成表格:

 

  //创建JSCELL,指明承载容器
            zcell1 = new ZCell(document.getElementById("cellContainer"));
            //创建表,并指定列,行数
            zcell1.InserSheet(0,10,22);

  那是,基本表已经有了,是个空表。大家得以在上边安装数据,设置数据分三种方法,一种通过数据源批量加载:

  //加载数据
            zcell1.GetSheet(0).LoadJsonData(jsondata);

  还足以单独设置有些单元格值:

  //设置单元格文本
            zcell1.GetSheet(0).SetCellValue(1,3,"下面请体验:");

  插件的效用比较多,能够安装数据,公式等,帮忙复制、黏贴、双击编辑等作用,这里不再逐一介绍,感兴趣的全自动物检疫索吧。

 

相关文章