table跳转

转载

https://blog.csdn.net/qq_41619796/article/details/88888111

 

bootstrap table带跳转页面

2019年03月29日 12:05:54 浩星 阅读数：196

 

 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41619796/article/details/88888111

老规矩先看效果图：

整个效果我都放在百度网盘了，最下面是地址：

简单说说这个：

第一引入文件，js主要是bootstrap.js,还有table的js,还有语言包的js,还有跳转js

1.  
   <script src="js/jquery-2.1.1.min.js"></script>
2.  
   <script src="js/bootstrap.min.js"></script>
3.  
   <script src="js/bootstrap-table.js"></script>//table的
4.  
   <script src="js/bootstrap-table-pagejump.js"></script>//跳转的
5.  
   <script src="js/bootstrap-table-zh-CN.js"></script>//语言包的

第二：html定义容器来放我们的table

1.  
   <div class="tableList" id="modeContent" style="width:1600px;height:400px;margin:50px auto 0">
2.  
   <table id="detailsTable" class="table table-bordered table-hover .table-responsive" data-show-columns="true">
3.  
    
4.  
   </table>
5.  
   </div>

第三：js部分

1.  
   var tabledata={
2.  
   data:[
3.  
   {"ID": 1, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
4.  
   {"ID": 2, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
5.  
   {"ID": 3, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
6.  
   {"ID": 4, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
7.  
   {"ID": 5, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
8.  
   {"ID": 6, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
9.  
   {"ID": 7, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
10.  
    {"ID": 8, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
11.  
    {"ID": 9, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
12.  
    {"ID": 10, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
13.  
    {"ID": 11, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
14.  
    {"ID": 12, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
15.  
    {"ID": 13, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
16.  
    {"ID": 14, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
17.  
    {"ID": 15, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
18.  
    {"ID": 16, "ZXMC" :"张三", "PRODUCTNAME": "1hao"},
19.  
    {"ID": 17, "ZXMC" :"张三", "PRODUCTNAME": "1hao"},
20.  
    {"ID": 18, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
21.  
    {"ID": 19, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
22.  
    {"ID": 20, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
23.  
    {"ID": 21, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
24.  
    {"ID":22, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
25.  
    {"ID": 23, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
26.  
    {"ID": 24, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
27.  
    {"ID": 25, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
28.  
    {"ID": 26, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
29.  
    ]
30.  
    }
31.  
    $('#detailsTable').bootstrapTable({
32.  
    // url: 'http://127.0.0.1:9000/mcsas/jhgl/rest/DatalistController/zhangwenhao', //请求后台的URL（*）
33.  
    data:tabledata.data,
34.  
    method: 'get', //请求方式（*）
35.  
    toolbar: '#toolbar', //工具按钮用哪个容器
36.  
    striped: true, //是否显示行间隔色
37.  
    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
38.  
    sortable: false, //是否启用排序
39.  
    sortOrder: "asc", //排序方式
40.  
    dataType:"json",
41.  
    sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
42.  
    pagination: true, //是否显示分页（*）
43.  
    pageNumber: 1, //初始化加载第一页，默认第一页
44.  
    pageSize: 10, //每页的记录行数（*）
45.  
    pageList: [10, 15, 20, 50], //可供选择的每页的行数（*）
46.  
    showColumns: false, //是否显示所有的列
47.  
    showRefresh: false, //是否显示刷新按钮
48.  
    minimumCountColumns: 2, //最少允许的列数
49.  
    clickToSelect: true, //是否启用点击选中行
50.  
    height: $("#modeContent").height()-300, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
51.  
    uniqueId: "Id", //每一行的唯一标识，一般为主键列
52.  
    buttonsAlign: "right", //按钮位置
53.  
    detailView: false,//父子表
54.  
    ShowPaginationSwitch:false,//是否显示数据条数选择框
55.  
    showExport: false,//数据导出
56.  
    search:false,
57.  
    paginationShowPageGo:true,//跳转到
58.  
    contentType:"application/x-www-form-urlencoded",
59.  
    columns: [
60.  
    // {
61.  
    // checkbox: true,
62.  
    // cellStyle:{
63.  
    // css:{"font-size":"120px"}
64.  
    // }
65.  
     
66.  
    // },
67.  
    {
68.  
    field: 'ID',
69.  
    title: '编号',
70.  
    visible: false
71.  
    }, {
72.  
    field: 'ZXMC',
73.  
    title: '产品编号'
74.  
    }, {
75.  
    field: 'PRODUCTNAME',
76.  
    title: '产品名称'
77.  
    }
78.  
    , {
79.  
    field: 'PRODUCTUSER',
80.  
    title: '货主名称'
81.  
    }, {
82.  
    field: 'PRICE',
83.  
    title: '单价（元）'
84.  
    },{
85.  
    field: 'BARCODERULE',
86.  
    title: '条码规则'
87.  
    },
88.  
    {
89.  
    field: 'ISUSING',
90.  
    title: '启用状态',
91.  
    formatter: function (value, row, index) {
92.  
    if (value == "启用")
93.  
    return '<span class="glyphicon glyphicon-ok label label-success" style="font-size:90%"> 启用</span>';
94.  
    else
95.  
    return '<span class="glyphicon glyphicon-remove label label-danger" style="font-size:90%"> 不启用</span>';
96.  
    }
97.  
     
98.  
    },
99.  
    {
100.  
     title: '操作',
101.  
     field: 'id',
102.  
     align: 'center',
103.  
     formatter:function(value,row,index){
104.  
     var e = '<a href="#" mce_href="#" style="color:#000" onclick="edit(\''+ row.id + '\')">编辑</a> ';
105.  
     var d = '<a href="#" mce_href="#" style="color:#000" onclick="del(\''+ row.id +'\')">删除</a> ';
106.  
     return e+d;
107.  
     }
108.  
     }
109.  
     ],
110.  
     queryParams: function (params) {//c传给后台的
111.  
     return params;
112.  
     },
113.  
     formatLoadingMessage: function () {
114.  
     return "数据正在加载中...";
115.  
     },
116.  
     formatNoMatches: function () {
117.  
     return '无符合条件的记录';
118.  
     },
119.  
     onPostBody:function(){ //数据渲染后调动函数
120.  
     var header=$("#detailsTable table thead tr th");
121.  
     var body=$("#detailsTable table tbody tr td");
122.  
     var footer=$("#detailsTable table tr td");
123.  
     body.each(function(){
124.  
     header.width((this).width());
125.  
     footer.width((this).width());
126.  
     });
127.  
     },
128.  
     onClickRow: function (row) {
129.  
     console.log(row);
130.  
     },
131.  
     });

 

好了，代码就是这些了，下面百度网盘有这个效果所有文件：

地址：https://pan.baidu.com/s/1dK8zPUy5n96JJuyszOO_gA 

提取码：kkds