DataGrid 全选以及剔除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:20px 0;">
<form method="post" action="">
<input type="button" value="selecet">
<input type="button" value="Del" onclick="getAll();">
</form>
</div>
<table id="dg" title="showtitle" style="width:700px;height:350px" data-options="
rownumbers:true,
singleSelect:false,
autoRowHeight:false,
pagination:true,
pageSize1:10">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th field="inv" width="80">Inv No</th>
<th field="date" width="100">Date</th>
<th field="name" width="80">Name</th>
<th field="amount" width="80" align="right">Amount</th>
<th field="price" width="80" align="right">Price</th>
<th field="cost" width="100" align="right">Cost</th>
<th field="note" width="110">Note</th>
</tr>
</thead>
</table>
<script>
//初始化加载分页
(function($){
function pagerFilter(data){
if ($.isArray(data)){// is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var state = dg.data('datagrid');
var opts = dg.datagrid('options');
if (!state.allRows){
state.allRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = $.extend(true,[],state.allRows.slice(start, end));
return data;
}
var loadDataMethod = $.fn.datagrid.methods.loadData;
$.extend($.fn.datagrid.methods, {
clientPaging: function(jq){
return jq.each(function(){
var dg = $(this);
var state = dg.data('datagrid');
var opts = state.options;
opts.loadFilter = pagerFilter;
var onBeforeLoad = opts.onBeforeLoad;
opts.onBeforeLoad = function(param){
state.allRows = null;
return onBeforeLoad.call(this, param);
}
dg.datagrid('getPager').pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
$(this).pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',state.allRows);
}
});
$(this).datagrid('loadData', state.data);
if (opts.url){
$(this).datagrid('reload');
}
});
},
loadData: function(jq, data){
jq.each(function(){
$(this).data('datagrid').allRows = null;
});
return loadDataMethod.call($.fn.datagrid.methods, jq, data);
},
getAllRows: function(jq){
return jq.data('datagrid').allRows;
}
})
})(jQuery);
//获取数据
function getData(){
var rows = [];
for(var i=1; i<=100; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
ck:i,
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
return rows;
}
//初始化加载
$(function(){
$('#dg').datagrid({data:getData()}).datagrid('clientPaging');
});
//获取选择的值（id）
function getAll()
{
var items = document.getElementsByTagName("input");//这里checkbox在html里面已经转化成了input控件，获取所有的input也就是checkbox
var str=""; //定义一个变量，来接收ID（行号）
for(var i = 1;i < items.length; i++)//循环你获取的所有的checkbox的长度
{
if(items[i].value!="" && items[i].type=="checkbox" && items[i].checked==true){//判断那个checkbox被选中 items[i].value!="on" &&
console.log(items[i]);
str+=","+items[i].value; //把被选中的用这个变量累加
}
}
if(str!="")
{
str=str.substring(1); //截取第一个 ","符号，得到所有的行号的数组
alert("you are del :"+str);
}else{
alert ("no num");
}
// document.getElementById("hfListID").value=str; //保存到隐藏域中，
};
</script>
</body>
</html>