Bootstrap-Table
Bootstrap-Table的使用
相關的技術文檔和資料
Bootstrap中文網：http://www.bootcss.com/css
Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.htmlhtml
Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/jquery
Bootstrap Table源碼：https://github.com/wenzhixin/bootstrap-tablegit
Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/github
Boostrap Table 擴展API：http://bootstrap-table.wenzhixin.net.cn/extensions/ajax
相關類文件的引入
|
1
2
3
4
5
6
7
8
9
10
11
|
<link rel=
"stylesheet" href=
"/static/bs/dist/css/bootstrap.css">
<link rel="stylesheet" href="/static/bstable/src/extensions/editable/bootstrap-editable.css">
<link rel="stylesheet" href="/static/bstable/dist/bootstrap-table.css">
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bs/dist/js/bootstrap.js"></script>
<script src="/static/bstable/dist/bootstrap-table.js"></script>
<script src="/static/bstable/dist/locale/bootstrap-table-zh-CN.js"></script>
<script src="/static/bstable/dist/extensions/editable/bootstrap-table-editable.js"></script>
<script src="/static/bootstrap-editable.min.js"></script>
|
代碼初始化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<body>
<div class="panel-body" style="padding-bottom:0px;">
<div class="panel panel-default">
<div class="panel-heading">查詢條件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="txt_search_departmentname">部門名稱</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_departmentname">
</div>
<label class="control-label col-sm-1" for="txt_search_statu">狀態</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_statu">
</div>
<div class="col-sm-4" style="text-align:left;">
<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查詢</button>
</div>
</div>
</form>
</div>
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
</button>
</div>
<table id="idc"></table>
</div>
</body>
|
js代碼bootstrap
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
$.fn.editable.defaults.mode = 'inline';
$('#'+tableid).bootstrapTable({
url: url, //請求後臺的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪一個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啓用排序
sortOrder: "asc", //排序方式
sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber:1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
//search: true, //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大
strictSearch: true,
showPaginationSwitch: true,
showColumns: true, //是否顯示全部的列
showRefresh: true, //是否顯示刷新按鈕
clickToSelect: true, //是否啓用點擊選中行
uniqueId: "id", //每一行的惟一標識，通常爲主鍵列
showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
showExport: true, //是否顯示導出
exportDataType: "basic", //basic', 'all', 'selected'.
onEditableSave: function (field, row, oldValue, $el) {
// delete row[0];
updata = {};
updata[field] = row[field];
updata['id'] = row['id'];
$.ajax({
type: "POST",
url: "/backend/modify/",
data: { postdata: JSON.stringify(updata), 'action':'edit' },
success: function (data, status) {
if (status == "success") {
alert("編輯成功");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
},
columns: [{
checkbox: true
}, {
field: 'one',
title: '列1',
editable: {
type: 'text',
title: '用戶名',
validate: function (v) {
if (!v) return '用戶名不能爲空';
}
}
//驗證數字
//editable: {
// type: 'text',
// title: '年齡',
// validate: function (v) {
// if (isNaN(v)) return '年齡必須是數字';
// var age = parseInt(v);
// if (age <= 0) return '年齡必須是正整數';
// }
//}
//時間框
//editable: {
// type: 'datetime',
// title: '時間'
//}
//選擇框
//editable: {
// type: 'select',
// title: '部門',
// source: [{ value: "1", text: "研發部" }, { value: "2", text: "銷售部" }, { value: "3", text: "行政部" }]
//}
//複選框
//editable: {
//type: "checklist",
//separator:",",
//source: [{ value: 'bsb', text: '籃球' },
// { value: 'ftb', text: '足球' },
// { value: 'wsm', text: '游泳' }],
//}
//select2
//暫未使用到
//取後臺數據
//editable: {
// type: 'select',
// title: '部門',
// source: function () {
// var result = [];
// $.ajax({
// url: '/Editable/GetDepartments',
// async: false,
// type: "get",
// data: {},
// success: function (data, status) {
// $.each(data, function (key, value) {
// result.push({ value: value.ID, text: value.Name });
// });
// }
// });
// return result;
// }
//}
}]
});
|
以上代碼對應的效果圖：緩存
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
