Bootstrap-tableの使い方
50572 ワード
Bootstrap-Table ， （client） ， （server） 。
： ， JSON ， ， ， ， 。 ， ， 。 ， 。 ， 。
： ， ， 。 ， ， 。
Bootstrap-table Boostrap ， ， Bootstrap 。
， ， 。
1 <link rel="stylesheet" href="bootstrap.min.css">
2 <script src="jquery.min.js"></script>
3 <script src="bootstrap.min.js"></script>
Bootstrap-table ：
CSS
1 <link rel="stylesheet" href="bootstrap-table.css">
1 <script src="bootstrap-table.js"></script>
2 <-- ， bootstrap-table.js -->
3 <script src="bootstrap-table-zh-CN.js"></script>
// bootstrap-table
3 function InitMainTable () {
4 // bootstrap-table $table，
5 var queryUrl = '/TestUser/RoleInfoList'
6 $table = $('#grid').bootstrapTable({
7 url: queryUrl, // URL（*）
8 method: 'GET', // （*）
9 //toolbar: '#toolbar', //
10 striped: true, //
11 cache: false, // ， true， （*）
12 pagination: true, // （*）
13 sortable: true, //
14 sortOrder: "asc", //
15 sidePagination: "server", // ：client ，server （*）
16 pageNumber: 1, // ， ,
17 pageSize: rows, // （*）
18 pageList: [10, 25, 50, 100], // （*）
19 search: false, //
20 strictSearch: true,
21 showColumns: true, // （ ）
22 showRefresh: true, //
23 minimumCountColumns: 2, //
24 clickToSelect: true, //
25 //height: 500, // ， height ，
26 uniqueId: "ID", // ，
27 showToggle: true, //
28 cardView: false, //
29 detailView: false, //
30 //
31 queryParams : function (params) {
32 // ， ，
33 var temp = {
34 rows: params.limit, //
35 page: (params.offset / params.limit) + 1, //
36 sort: params.sort, //
37 sortOrder: params.order // （desc，asc）
38 };
39 return temp;
40 },
41 columns: [{
42 checkbox: true,
43 visible: true //
44 }, {
45 field: 'Name',
46 title: ' ',
47 sortable: true
48 }, {
49 field: 'Mobile',
50 title: ' ',
51 sortable: true
52 }, {
53 field: 'Email',
54 title: ' ',
55 sortable: true,
56 formatter: emailFormatter
57 }, {
58 field: 'Homepage',
59 title: ' ',
60 formatter: linkFormatter
61 }, {
62 field: 'Hobby',
63 title: ' '
64 }, {
65 field: 'Gender',
66 title: ' ',
67 sortable: true
68 }, {
69 field: 'Age',
70 title: ' '
71 }, {
72 field: 'BirthDate',
73 title: ' ',
74 formatter: dateFormatter
75 }, {
76 field: 'Height',
77 title: ' '
78 }, {
79 field: 'Note',
80 title: ' '
81 }, {
82 field:'ID',
83 title: ' ',
84 width: 120,
85 align: 'center',
86 valign: 'middle',
87 formatter: actionFormatter
88 }, ],
89 onLoadSuccess: function () {
90 },
91 onLoadError: function () {
92 showTips(" ！");
93 },
94 onDblClickRow: function (row, $element) {
95 var id = row.ID;
96 EditViewById(id, 'view');
97 },
98 });
99 };
var temp = {
5 rows: params.limit, //
6 page: (params.offset / params.limit) + 1, //
7 sort: params.sort, //
8 sortOrder: params.order // （desc，asc）
9 };
//2 /// , ( ) 3 /// 4 ///5 public override ActionResult FindWithPager() 6 { 7 // ， MyDenyAccessException 8 base.CheckAuthorized(AuthorizeKey.ListKey); 9 10 string where = GetPagerCondition(); 11 PagerInfo pagerInfo = GetPagerInfo(); 12 var sort = GetSortOrder(); 13 14 List<TestUserInfo> list = null; 15 if (sort != null && !string.IsNullOrEmpty(sort.SortName)) 16 { 17 list = baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc); 18 } 19 else 20 { 21 list = baseBLL.FindWithPager(where, pagerInfo); 22 } 23 24 //Json {total:22,rows:{}} 25 // Json 26 var result = new { total = pagerInfo.RecordCount, rows = list }; 27 return ToJsonContent(result); 28 }
分页写法
protected virtual PagerInfo GetPagerInfo()
6 {
7 int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
8 int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);
9
10 PagerInfo pagerInfo = new PagerInfo();
11 pagerInfo.CurrenetPageIndex = pageIndex;
12 pagerInfo.PageSize = pageSize;
13
14 return pagerInfo;
15 }
//
2 function linkFormatter(value, row, index) {
3 return "「 + value + "";
4 }
5 //Email
6 function emailFormatter(value, row, index) {
7 return "「 + value + "";
8 }
9 //
10 function sexFormatter(value) {
11 if (value == " ") { color = 'Red'; }
12 else if (value == " ") { color = 'Green'; }
13 else { color = 'Yellow'; }
14
15 return '+ color + '">' + value + '';
16 }
//
2 function actionFormatter(value, row, index) {
3 var id = value;
4 var result = "";
5 result += "+id+'，view='view')\title='ビュー''";
6 result += "+id+')\title=' ''";
7 result += "+id+')\title=' ''";
8
9 return result;
10 }
function initTable(){
3 $('#test-table').bootstrapTable({
4 method: 'get',
5 toolbar: '#toolbar', //
6 striped: true, //
7 cache: false, // ， true， （*）
8 pagination: true, // （*）
9 sortable: false, //
10 sortOrder: "asc", //
11 pageNumber:1, // ，
12 pageSize: 10, // （*）
13 pageList: [10, 25, 50, 100], // （*）
14 url: "/testProject/page4list.json",// bootstrap table
15 queryParamsType:'', // 'limit' , ：offset,limit,sort
16 // '' ：pageSize,pageNumber
17
18 //queryParams: queryParams,// ， ， ，
19 sidePagination: "server", // ：client ，server （*）
20 //search: true, // ， ， ， ，
21 strictSearch: true,
22 //showColumns: true, //
23 //showRefresh: true, //
24 minimumCountColumns: 2, //
25 clickToSelect: true, //
26 searchOnEnterKey: true,
27 columns: [{
28 field: 'id',
29 title: 'id',
30 align: 'center'
31 }, {
32 field: 'testkey',
33 title: ' ',
34 align: 'center'
35 }, {
36 field: 'testname',
37 title: ' ',
38 align: 'center'
39 },{
40 field: 'id',
41 title: ' ',
42 align: 'center',
43 formatter:function(value,row,index){
44 // formatter
45 //value： field ， id
46 //row：
47 var a = 'テスト';
48 }
49 }],
50 pagination:true
51 });
52 }