转基于ssm的Bootstrap-table的学习演示

说明一点，本文借鉴别人的分享资料，只为共享知识，我是java共享者，共创java未来！！

1.首先要下载相关文件

2.引入jsp如下：

<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/jquery-2.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/bootstrap.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/bootstrap-table.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/bootstrap-table-zh-CN.js" charset="utf-8"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/list1.js"></script>

3.编辑jsp：

在body里面添加:<table id="table"></table>

4.编辑js:

$(function() {
   // 1.初始化Table
   var oTable = new TableInit();
   oTable.Init();
});

var TableInit = function() {
   var oTableInit = new Object();
   // 初始化Table
   oTableInit.Init = function() {
       $('#table').bootstrapTable({
           url : 'http://localhost:8080/SSMTest/data/data2.json', // 请求后台的URL（*）
           method : 'get', // 请求方式（*）
           striped : true,// 是否显示行间隔色
           search : true,
           showRefresh : true,
           showColumns : true, // 是否显示所有的列
           showRefresh : true, // 是否显示刷新按钮
           minimumCountColumns : 2, // 最少允许的列数
           clickToSelect : true, // 是否启用点击选中行
           height : 700, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
           uniqueId : "no", // 每一行的唯一标识，一般为主键列
           showToggle : true, // 是否显示详细视图和列表视图的切换按钮
           cardView : false, // 是否显示详细视图
           detailView : false, // 是否显示父子表
           columns : [ {
               field : 'ID',
               title : 'ID'
           }, {
               field : 'Name',
               title : '名字'
           }, {
               field : 'Sex',
               title : '性别'
           }, {
               field : 'operate',
               title : '操作',
               formatter : operateFormatter
           // 自定义方法，添加操作按钮
           }, ]
       });

};

   // 得到查询的参数
   oTableInit.queryParams = function(params) {
       var temp = { // 这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
           limit : params.limit, // 页面大小
           offset : params.offset
       };
       return temp;
   };
   return oTableInit;
};

function operateFormatter(value, row, index) {// 赋予的参数
   return [ '<a class="btn active disabled" href="#">编辑</a>',
           '<a class="btn active" href="#" >档案</a>',
           '<a class="btn btn-default" href="#">记录</a>',
           '<input type="button" id="dangan" value="准入">' ].join('');
}
5.最重要的是URL中data的引入：

如果出现问题，比如说：data文件引入出现404；那么我出现的问题是SSM框架下，调用controller时发生的路径问题，

那么，我的解决方法是：设置绝对路径，这样就不用怕了，

原文链接：https://blog.csdn.net/qq7758521fang/article/details/81152219

转 基于ssm的Bootstrap-table的学习演示

猜你喜欢

转基于ssm的Bootstrap-table的学习演示