• 3分钟内看完这,bootstraptable表格控件,受益匪浅!


    今天分享一下bootstraptable的相关技能点,由于第一次接触,所以刚开始碰了好多壁,于是趁现在过去不久,先总结总结。

    Bootstraptable简单的来说就是一个表格控件,但是这个表格可不是一般的表格,分页、排序、查询都自带了,你就给他一个json数据就可以了。

    接下来我们就看看怎么用:

    1.先在页面中引入所需的js文件和css文件

    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-table.js"></script>
    <script src="bootstrap-table-zh-CN.js"></script>

    2.在我们所需要展示数据的表格上加个id,或者class都可以,在这里我以id为例。

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

    3.接下来就是给表格里面加数据了,我们可以在加载当前页面时利用ajax去请求控制器,查询所需要的数据,然后放在一个集合中,转换成json格式就可以了。

    下面是js中相关代码:

    $(function () {
         caseTable();
        });
       
    
    //加载数据
    function caseTable() {
        $('#table').bootstrapTable({
            method: "get", //提交方法
            striped: true, //是否显示行间隔色
            cache:true, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性
            singleSelect: false, //设置True 将禁止多选
            url: "/Home/GetAllAnJian",//查询的地址
            dataType: "json", //服务器返回的数据类型
            pagination: true, //是否分页
            pageSize: 5, //页大小
            pageNumber: 1, //当前页
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded", //发送到服务器的数据编码类型
            queryParams:null, //参数
            // function (parms) {
            // return {
            // aid: $("#aid").val(),
            // };
            //},
            columns: [
                
                {
                    title: "案件编号", //列标题
                    field: 'aid', //该列映射的data的参数名
                    align: 'center', //水平对齐方式
                    valign: 'middle', //垂直对齐方式
                    sortable: true      //是否排序
    
                },
                {
                    title: '案件名称',
                    field: 'aname',
                    align: 'center',
                    valign: 'middle',
                    sortable: true
                },
                {
                    title: '案件类型',
                    field: 'atypename',
                    align: 'center',
                    valign: 'middle',
                    sortable: true
                },
     {
                    field: '',
                    title: '操作',
                    halign: 'center',
                    align: 'center',
                     '50px', //宽度
                    sortable: true, //下面是单独加的按钮
                    formatter: function (value,row,index) {
                        var e = '<button class="btn btn-primary" onclick="tijiao(\'' + row.aid + '\')">提交</button>';
                        return e;
                    },
                }]
        });
    }

    4.后台查询数据的代码(以asp mvc为例):

    控制器是:HomeController

    请求数据的方法:

    //查询所有的案件信息
    public JsonResult GetAllAnJian(string aid)
    {
    
    List<AnJian> anAll = (from a in entity.AnJian
      where a.astatename.Equals("新建")
      select a).ToList();
    //将日期类型转换成string类型
    for (int i = 0; i < anAll.Count; i++)
      {
      anAll[i].adate_formate = anAll[i].adate.ToString();
      }
      return Json(anAll, JsonRequestBehavior.AllowGet);
      }

    下面是演示图(数据随便填的):

    对了,另外结合layui使用更好用哦,时候不早了,明天在说结合layui使用的方法。

    往期内容推荐

    layui如何实现添加数据时关闭页面层,并实时刷新表格数据?

    2020-06-01

    你不知道ADO.Net中操作数据库的步骤【超详细整理】

    2020-05-30

    Photoshop中将图片拖不进软件的编辑区的解决方法,超详细

    2020-05-29

    eclipse下载与安装步骤详解,包含解决错误(最全最详细,多图)

    2020-05-28

    Boostrap技能点整理之【按钮样式】

    2020-05-27

    Boostrap技能点整理之【网格系统】

    2020-05-26

  • 相关阅读:
    面对复杂业务,if-else coder 如何升级?
    为什么StringBuilder是线程不安全的?
    Hashmap中文解释
    mysql 5.6 5.7 8.0新特性
    数据增强,扩充数据集
    神经网络参数优化器
    缓解过拟合
    损失函数
    神经网络的复杂度&指数衰减学习率&激活函数
    GRU&实例股价预测
  • 原文地址:https://www.cnblogs.com/a1111/p/14877462.html
Copyright © 2020-2023  润新知