zoukankan      html  css  js  c++  java

  • bootstrap-table 基础用法

    1.需要添加的引用。

        
    <script src="@Url.Content("~/js/jquery-2.1.1.js")"></script>
　　 <script src="@Url.Content("~/js/bootstrap.min.js")"></script>
    <script src="@Url.Content("~/js/bootstrap-table.js")"></script>
    <script src="@Url.Content("~/js/bootstrap-table-zh-CN.js")"></script>

    2.完整的HTML

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="@Url.Content("~/js/jquery-2.1.1.js")"></script>
    <link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet">
    <link href="@Url.Content("~/font-awesome/css/font-awesome.css")" rel="stylesheet">
    <link href="@Url.Content("~/css/plugins/iCheck/custom.css")" rel="stylesheet">
    <link href="@Url.Content("~/css/animate.css")" rel="stylesheet">
    <link href="@Url.Content("~/css/style.css")" rel="stylesheet">
    <script src="@Url.Content("~/js/jquery-ui-1.10.4.min.js")"></script>
    <script src="@Url.Content("~/js/bootstrap.min.js")"></script>
    <script src="@Url.Content("~/js/bootstrap-table.js")"></script>
    <script src="@Url.Content("~/js/bootstrap-table-zh-CN.js")"></script>
    <script src="@Url.Content("~/js/selectjs/bootstrap-select.js")"></script>
    <link href="@Url.Content("~/js/selectjs/bootstrap-select.min.css")" rel="stylesheet" />
    <script src="@Url.Content("~/js/selectjs/defaults-zh_CN.js")"></script>
    <script src="@Url.Content("~/js/layer/layer.js")"></script>
    <script src="@Url.Content("~/js/bootstrap.min.js")"></script>
    <script src="@Url.Content("~/js/plugins/metisMenu/jquery.metisMenu.js")"></script>
    <script src="@Url.Content("~/js/plugins/slimscroll/jquery.slimscroll.min.js")"></script>

    <!-- Custom and plugin javascript -->
    <script src="@Url.Content("~/js/inspinia.js")"></script>
    <script src="@Url.Content("~/js/plugins/pace/pace.min.js")"></script>

    <!-- iCheck -->
    <script src="@Url.Content("~/js/plugins/iCheck/icheck.min.js")"></script>
    <!-- Jvectormap -->
    <script src="@Url.Content("~/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js")"></script>
    <script src="@Url.Content("~/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js")"></script>
    <script src="@Url.Content("~/js/JsIFrame.js")"></script>
    <script src="@Url.Content("~/js/layer/jquery.form.min.js")"></script>
    <script src="@Url.Content("~/js/ReportManage.js")"></script>


</head>

<body onload="IFrameResize()">
    <div style="background-color:#f3f3f3;height:100%">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">

                    <div class="ibox-title">
                        <h5>科技查新报告单管理</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table id="cateTable" style="table-layout:fixed;word-break:break-all" data-toggle="table">
                            <thead>
                                <tr>
                                    <th data-field="ID" data-editable="true">ID</th>
                                    <th data-field="ReportNum">报告单编号</th>
                                    <th data-field="PrjName_CN" data-editable="true">委托单名称</th>
                                    <th data-field="Status" data-editable="true">状态</th>
                                    <th data-field="Addtime" data-editable="true">添加时间</th>
                                </tr>
                            </thead>
                        </table>

                    </div>

                </div>

            </div>
        </div>
    </div>
</body>
</html>

    3. Ajax所在的JS代码  （    <script src="@Url.Content("~/js/ReportManage.js")"></script>）

    var ztable = null;
$(function () {

    InitTable();
});

//初始加载table
function InitTable() {

    //先销毁表格  
    $('#cateTable').bootstrapTable('destroy');
    //初始化表格,动态从服务器加载数据  
    ztable = $('#cateTable').bootstrapTable(
          {
              url: '../NoveltyReport/GetAllReport',         //请求后台的URL（*）
              method: 'get',                      //请求方式（*）               //工具按钮用哪个容器
              striped: true,                      //是否显示行间隔色
              cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
              pagination: true,                   //是否显示分页（*）
              search: true,
              sortOrder: "asc",                   //排序方式
              sidePagination: "client",
              pageNumber: 1,                       //初始化加载第一页，默认第一页
              pageSize: 10,                       //每页的记录行数（*）
              strictSearch: true,
              queryParamsType: "undefined",

              onPageChange: function (number, size) {

                  //PageChanged();
              },
              onClickCell: function (field, value, row, $element) {
                  if (field == 7) {
                      DeleteProxyByID(row.ID);
                  } else if (field == 6) {
                      location.href = "../NoveltyReport/ReportEdit?ReportID=" + row.ID + "&&ProxyID=" + row.ProxyID;
                  } else if (field == 9) {
                      SubitShenHe(row);
                  } else if (field == 8) {
                      location.href = "../Word/DownLoadReport?reportID="+row.ID;
                  }

              },

              clickToSelect: false,                //是否启用点击选中行
              //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
              uniqueId: "Id",                     //每一行的唯一标识，一般为主键列
              cardView: false,                    //是否显示详细视图
              detailView: false,                   //是否显示父子表
              columns: [

              {
                  field: 'Number',
                  title: '行号',
                  formatter: function (value, row, index) {
                      return index + 1;
                  }
              },
                  {
                      field: 'ID',
                      title: '序号',

                  },
                  {
                      field: 'ReportNum',
                      title: '报告单编号',
                      cellStyle: formatTableUnit

                  }, {
                      field: 'PrjName_CN',
                      title: '委托单名称',
                      cellStyle: formatTableUnit
                  },
                  {
                      field: 'Status',
                      title: '状态',
                      cellStyle: formatTableUnit

                  }, {
                      field: 'Addtime',
                      title: '添加时间',
                      cellStyle: formatTableUnit

                  },
                   {
                       title: "选择",
                       formatter: operateFormatter
                   },
              {
                  field: 'ProxyID',
                  title: '委托单号'
              },
              {
                  title: "下 载",
                  formatter: operateFormatterRed
              }, 
       

              ]
          }
      );
    $("#cateTable").bootstrapTable('hideColumn', 'ID');
    $("#cateTable").bootstrapTable('hideColumn', 'ProxyID');

}

function formatTableUnit(value, row, index) {

    return {
        css: {
            "overflow": "hidden",
            "white-space": "nowrap",
            "text-overflow": "ellipsis",
            " -webkit-line-clamp": "3"
        }
    }

}
function operateFormatter(value, row, index) {
    return [
        '<button type="button" class="RoleOfA btn btn-default  btn-sm" style="margin-right:15px;">查 看</button>',
    ].join('');
}

function operateFormatterRed(value, row, index) {
    return [
        '<button type="button" class="RoleOfA btn btn-default  btn-sm" style="margin-right:15px;">下 载</button>',
    ].join('');
}

function operateFormatterSH(value, row, index) {
    return [
    '<button type="button" class="RoleOfA btn btn-default  btn-sm" style="margin-right:15px;background-color:Blue;">提交审核</button>',
    ].join('');

}

function DeleteProxyByID(RepoprtID) {
    layer.confirm('您确定要删除数据？', {
        btn: ['确定', '取消'], //按钮
        offset: ["10%", "30%"]
    }, function () {
        $.post("../NoveltyReport/AjaxDeleteReport", { "RepoprtID": RepoprtID }, function (data) {
            if (data != "") {
                var rs = JSON.parse(data);
                if (rs.Result) {
                    layer.msg("删除成功！");
                    InitTable();
                } else {
                    layer.msg(rs.Msg);
                }
            }
        });
    }, function () {

    });

}

function SubitShenHe(row) {
    layer.confirm('您确定将报告单提交审核？', {
        btn: ['确定', '取消'], //按钮
        offset: ["10%", "30%"]
    }, function () {
        $.post("../NoveltyReport/SubReportRatify", { "RepoprtID": row.ID }, function (data) {
            if (data != "") {
                var rs = JSON.parse(data);
                if (rs.Result) {
                    layer.msg("提交审核成功！");
                    InitTable();
                } else {
                    layer.msg(rs.Msg);
                }
            }
        });
    }, function () {

    });

}
  • 相关阅读:
    使用图表控件
    XPath 语法规则入门
    用javascript生成日历控件
    .NET开发人员应该关注的七个开源项目
    浅谈软件技术的发展趋势及定位
    System.Runtime.InteropServices.Automation
    【摘录】手机操作系统三国时代的结束
    .NET的资源并不限于.resx文件，你可以采用任意存储形式[上篇] （转载）
    OSPaas征途（前言）
    .NET的资源并不限于.resx文件，你可以采用任意存储形式[下篇]
  • 原文地址：https://www.cnblogs.com/liuruitao/p/7458131.html
Copyright © 2011-2022 走看看