1.EasyUI datagrid
$("#waitorder")
.datagrid(
{
url : "${ctx}/waitOrder/findWaitOrder",
nowrap : false,
striped : true,
remoteSort : false,
pageSize : 20,
fit : true,
queryParams : {},
singleSelect : true,//是否單選
pagination : true,//分頁控件
rownumbers : true,//行號
fitColumns : true,//列寬自動填充滿表格
checkOnSelect : false,
selectOnCheck : false,
toolbar : "#hkDgTb",//工具欄
loadFilter : function(data) {
if (data.content) {
return {
total : data.totalElements,
rows : data.content
};
} else {
if (typeof data.length == "number"
&& typeof data.splice == "function") {
return {
total : data.length,
rows : data
};
} else {
return data;
}
}
},
columns : [ [
{
field : 'ck',
checkbox : true
},
{
field : 'mobile',
title : '手機號',
width : 150,
align : "center"
}
] ],
});
var checkedItems = $('#waitorder').datagrid(
'getChecked');
var ids = [];
$.each(checkedItems, function(index, item) {
ids.push(item.id);
});
2.Bootstrap
$("#table")
.bootstrapTable(
{
method : 'get',
contentType : "application/x-www-form-urlencoded",
dataType : "json",
url : "${path}/Commodity/queryPaginate",
pageList : [],
striped : false,
pagination : true,
sidePagination : 'server',//設置爲服務器端分頁
showColumns : true, // 開啓自定義列顯示功能
showRefresh : true, // 開啓刷新功能
smartDisplay : true, // 智能顯示 pagination 和 cardview 等
clickToSelect : true, // 單擊行即可以選中
queryParams : oTableInit.queryParams,
//showExport: true,
//exportTypes: ['csv','txt','xml'],
clickToSelect : true,
columns : [
{
title : '選擇',
checkbox : true
},
{
title : '產品名稱',
field : 'COMMODITYNAME'
},
} ]
});
var checkedItems = $("#table").bootstrapTable('getAllSelections');
var ids = [];
$.each(checkedItems, function(index, item) {
ids.push(item.ID);
});