DataGrid 全选以及删除

starbhhc

浏览: 655774 次
性别:
来自: 深圳

最近访客更多访客>>

hyw100200

njdccy

yinjl

Damon_admin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<!DOCTYPE html>

<html>

<head>

<title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>

</head>

<body>

</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 field="amount" width="80" align="right">Amount</th>

<th field="price" width="80" align="right">Price</th>

</tr>

</thead>

</table>

//初始化加载分页

(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>

分享到：

java与json之间的转换 | easyui DataGrid 的限制行数和删除行

2015-04-14 09:39
浏览 743
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论