1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>练习1，bootstraptable FROM Django</title>
6 {% include './bootstrapIndex.html' %}
7 </head>
8 <body>
9 <div class="container-fluid">
10 <div class="container-fluid">
11 <div id="toolbar">
12 <select class="selectpicker form-control-lg" data-live-search="true" id="nation">
13 <option value="0">--请选择--</option>
14 </select>
15 </div>
16 <div class="bi-arrow-bar-right" style="font-size: 6rem"></div>
17 <table id="mytable" class="table-responsive text-nowrap" data-locale="zh-CN"></table>
18 <table id="ge_table" class="table-responsive text-nowrap" data-locale="zh-CN"></table>
19 </div>
20 </div>
21 <script>
22 $(function () {
23 //两个方法必须写在初始化 table之前， table中columns ：最后一项需要配置events 和 formatter
24 function addFunctionAlty(value, row, index) {
25 return [
26 '<a id="update_btn" href="#" class="glyphicon glyphicon-edit" title="修改">修改</a>',
27 '<a id="btn_yes"><span class="glyphicon glyphicon-ok label label-success" style="font-size:90%">通过</span></a>',
28 '<a id="btn_no"><span class="glyphicon glyphicon-remove label label-danger" style="font-size:90%">婉拒</span></a>',
29 ].join('');
30 }
31
32 window.operateEvents = {
33 "click #update_btn": function (e, value, row, index) {
34 //这里写需要执行的代码
35 //删除
36 var uid = $(this).parent().parent().attr("data-uniqueid");
37 alert('ok');
38 // $('#myTable').bootstrapTable('removeByUniqueId', uid);
39 // //删除之后刷新一下表格
40 // $("#myTable").bootstrapTable('refresh');
41 },
42 "click #btn_yes": function (e, value, row, index) {
43 //这里写需要执行的代码
44 //删除
45 // var uid = $(this).parent().parent().attr("data-uniqueid");
46 var ge_data1 = row.ID;
47 // //console.log(index)
48 //更新所在行内check 这一列的值
49 var rows = {
50 index: index,//更新列所在行的索引
51 field: 'check',//要更新列的field
52 value: "Yes",//要更新列的数据
53 };//更新表格数据
54 $('#table').bootstrapTable("updateCell", rows);
55 //取出城市值进行判断
56 if (row.city == 0) {
57 $('#ge_div_save').css({"display": "none"});
58 } else {
59 $('#ge_div_save').css({"display": "block"});
60 }
61 id_data = [];
62 id_data.push(row.code);
63 if (row.check == 'Yes') {
64 id_data.push(1);
65 }
66 if (row.check == 'No')
67 id_data.push(0);
68 //last_data 是二维数组 i是一维数组在二维数组中的下标值 item【】则是一维数组中具体值
69 if (last_data.length > 0) {
70 del_flag = 0;
71 $.each(last_data, function (i, item) {
72 //console.log(item[0]);
73 //console.log(item[1]);
74 if (row.code == item[0]) {
75 del_id = i;
76 del_flag = 1;
77 //console.log("这个" + i);
78 }
79 });
80 if (del_flag == 1) {
81 last_data.splice(del_id, 1);
82 }
83 }
84 last_data.push(id_data);
85 },
86 "click #btn_no": function (e, value, row, index) {
87 //这里写需要执行的代码
88 //删除
89 // var uid = $(this).parent().parent().attr("data-uniqueid");
90 var ge_data1 = row.check;
91 // //console.log(index)
92 //更新所在行内check 这一列的值
93 var rows = {
94 index: index,//更新列所在行的索引
95 field: 'check',//要更新列的field
96 value: "No",//要更新列的数据
97 };//更新表格数据
98 $('#table').bootstrapTable("updateCell", rows);
99 //取出城市值进行判断
100 if (row.city == 0) {
101 $('#ge_div_save').css({"display": "none"});
102 } else {
103 $('#ge_div_save').css({"display": "block"});
104 }
105 id_data = [];
106 id_data.push(row.code);
107 if (row.check == 'Yes') {
108 id_data.push(1);
109 }
110 if (row.check == 'No')
111 id_data.push(0);
112 //last_data 是二维数组 i是一维数组在二维数组中的下标值 item【】则是一维数组中具体值
113 if (last_data.length > 0) {
114 del_flag = 0;
115 $.each(last_data, function (i, item) {
116 //console.log(item[0]);
117 //console.log(item[1]);
118 if (row.code == item[0]) {
119 del_id = i;
120 del_flag = 1;
121 //console.log("这个" + i);
122 }
123 });
124 if (del_flag == 1) {
125 last_data.splice(del_id, 1);
126 }
127 }
128 last_data.push(id_data);
129 },
130 }
131 //原文链接：https://blog.csdn.net/weixin_44657749/article/details/100562318
132 mycoloumns = [
133 {
134 field: 'state',
135 checkbox: true,
136 singleSelect: true,
137 },
138 {
139 field: 'id',
140 title: 'ID',
141 visible: true,
142 sortable: true,
143 }, {
144 field: 'name', //field 区分大小写，注意后台返回的数据名称
145 title: '姓名',
146 visible: true,
147 sortable: true,
148 }, {
149 field: 'age',
150 title: '年龄',
151 sortable: true,
152 },
153 {
154 field: 'leader',
155 title: '审核人',
156 visible: false,
157 sortable: true,
158 },
159 {
160 field: 'last_check',
161 title: '原审核',
162 visible: false,
163 sortable: true,
164 },
165 {
166 field: 'check',
167 title: '审核',
168 visible: false,
169 sortable: true,
170 }, {//每条数据后加操作按钮
171 field: 'operation',
172 title: '操作1',
173 width: '80px',
174 align: 'center',
175 events: operateEvents,//给按钮注册事件
176 formatter: addFunctionAlty,//表格中增加按钮
177 },
178 {
179 field: 'operate',
180 title: '操作',
181 width: 120,
182 align: 'center',
183 valign: 'middle',
184 formatter: actionFormatter,
185 },
186 ];
187 $.ajax({
188 url: '../getdata/',
189 method: 'GET',
190 async: false,
191 dataType: 'JSON',
192 data: {
193 "name": "葛",
194 "age": 45,
195 },
196 traditional: true, //加上此项可以传数组,传递数组必须要加，否则数组无法传递到后端
197 success: function (result) {
198 $('#ge_table').bootstrapTable('destroy').bootstrapTable({
199 data: result,
200 pagination: true,//显示分页
201 clickToSelect: false,//单击列表选中
202 toolbar: "#toolbar",//显示工具栏
203 sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
204 pageNumber: 1, //初始化加载第一页，默认第一页
205 pageSize: 3, //每页的记录行数（*）
206 pageList: [2, 'ALL'], //可供选择的每页的行数（*）
207 search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
208 searchAlign: 'left',//data-search-align="left" 相当于
209 strictSearch: false, //精确查找，是否全局匹配,false模糊匹配
210 clickToSelect: true, //是否启用点击选中行
211 // height: tableHeight(), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
212 uniqueId: "id", //每一行的唯一标识，一般为主键列
213 cardView: false, //是否显示详细视图
214 // cache: true, // 设置为 false 禁用 AJAX
215 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
216 detailView: false, //是否显示父子表
217 buttonsAlign: "left", //按钮位置
218 locale: "zh-CN",//默认英文，设置如下就是显示中文
219 Icons: 'glyphicon-export',
220 showColumns: true,
221 showToggle: true,//工具栏上显示列表模式切换是否显示详细视图和列表视图的切换按钮
222 showExport: true,//工具栏上显示导出按钮
223 //exportDataType: $(this).val(),//显示导出范围
224 exportTypes: ['doc', 'excel', 'xlsx', 'png', 'txt',],//导出格式
225 exportOptions: {//导出设置
226 fileName: 'wordGe',//下载文件名称
227 },
228 //当鼠标单击选定行时 背景色变 info 是bootstrap.css 自带
229 onClickRow: function (row, $element) {
230 {#alert(row.id);#}
231 $('.info').removeClass('info');
232 $($element).addClass('info');
233 },
234 onDblClickRow: function (row) {
235 alert("DbClick:" + row.name);
236 //必须配置 checkbox : true 和 singleSelect : true ?
237 $("#ge_table").bootstrapTable('getSelections');//获取选中所有
238 $("#ge_table").bootstrapTable('getSelections')[1];//获取选中的一条，因为返回获取到的数据的是一个数组
239 temp = $("#ge_table").bootstrapTable('getSelections')[1];
240 // alert(temp);
241 $('#ge_table').bootstrapTable('getData');//获取表格中所有数据
242 },
243 columns: mycoloumns,
244 })
245 },
246 error: function () {
247 alert('error');
248 }
249 })
250 // createTable(message);
251 })
252
253 function actionFormatter(value, row, index) {
254 var id = value;
255 var result = "";
256 result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
257 result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
258 result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
259 return result;
260 }
261 </script>
262 </body>
263 </html>
浙公网安备 33010602011771号