bootstrap-table 基礎用法

時間 2019-11-13

原文原文鏈接

1.須要添加的引用。javascript

    
    <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.完整的HTMLcss

<!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>）html

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 () {

    });

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。