dataGrid用法（完整的一个表格操作）
2018-01-26 本文已影响0人
皮卡乒乓
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../lib/jqueryEasyui/jeasyui.js"></script>
<style>
#panel{width: 600px;height: 400px;}
</style>
</head>
<body>
<button onclick="dataG.getSelected()">获取点中的行（select，只可能是一个）</button>
<button onclick="dataG.getChecked()">获取√中的行（checked）</button>
<div class="easyui-panel" id="panel">
<table id="dg">
</table>
</div>
</body>
<script>
var dataG = {};
$(function(){
dataG.initDataGrid();
dataG.loadData(1,10,"");
})
//初始化表格
dataG.initDataGrid = function(){
$("#dg").datagrid({
title:"信息列表",
rownumbers:true,
//当singleSelect为false时候，则可以多选，但会和getSelected混淆，所以，删除，编辑，等操作，放在行内更合适些
singleSelect:false,
autoRowHeight:false,
striped:true,
nowrap:false,
fit:true,
remoteSort:false,
fit:true,
toolbar:'#toolbar',
pagination:true,
loadMsg:"正在加载数据，请稍候……",
columns:[[
{field:'op',title:'操作',width:40,align:'center',checkbox:"true"},
{field:'ops',title:'操作',width:200,align:'center',formatter:function(value,row,index){
return '<button onclick="dataG.UpdateRow(\''+index+'\',\''+row.code+'\',event)">更新</button><button class="seaRow" onclick="dataG.seaRow(\''+row.code+'\',\''+row.name+'\',event)">查看</button><button class="" onclick="dataG.delRow(\''+row.code+'\',\''+index+'\',event)">删除</button>'
}},
{field:'name',title:'name',width:'180',align:"center"}
]],
onClickRow:function(index, row){
dataG.clickRowsDoThing(index,row);
},
onLoadSuccess:function(data){
dataG.loadSuccessDoThing(data);
}
});
//分页
var p = $('#dg').datagrid('getPager');
$(p).pagination({
url:'../json/api?apikey=videoGroupSearch',
pageSize: 10,
pageList: [10],
beforePageText: '第',
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onSelectPage:function(pageNumber, pageSize){
dataG.loadData(pageNumber,pageSize,"");
}
});
}
// 初始化数据
dataG.loadData = function(page,rows,key){
var pageurl = "../json/api?apikey=videoGroupSearch&page="+page+"&rows="+rows+"&key="+key;
$("#dg").datagrid("loading");
$.ajax({
url:pageurl,
dataType:"json",
success:function(json){
dataG.loadDataCallback(json);
}
})
}
//获取数据后的回调
dataG.loadDataCallback = function(json){
$("#dg").datagrid("loaded");
if(json.code==0){
//分页用
var data = {};
data.total = json.count;
data.rows = json.data;
var count = data.length;
$("#count").html(count);
$("#dg").datagrid("loadData",data);
}else{
alert("error");
}
}
//加载完成后要干的事
dataG.loadSuccessDoThing = function(data){
$("#dg").datagrid("selectRow",0); //默认选中第一行
//等等。。。。。。。
}
//选中某行要干的事情，index为改行的索引，row为该行的对象
dataG.clickRowsDoThing = function(index,row){
//等等。。。。。。。
}
//获取选中的行
dataG.getSelectRow = function(){
return( $("#dg").datagrid("getSelected") );
}
//获取√选中的行
dataG.getCheckedRow = function(){
return( $("#dg").datagrid("getChecked") );
}
//获取选中的行对象，可进行任意操作
dataG.getSelected = function(){
var selectRow = dataG.getSelectRow();
console.log(selectRow);
}
//获得有√的行，返回的是一个数组，里面是每一行的对象
dataG.getChecked = function (){
var checkedRow = dataG.getCheckedRow();
console.log(checkedRow);
}
//更新某一行
dataG.UpdateRow = function(index,rowId,event){
event.stopPropagation();
console.log(index+",,,,,,,"+rowId);
$('#dg').datagrid('updateRow',{
index: index,
row: {
/* name: 'jwl',
age: '10' */
}
});
}
//根据某一行的ID，删除一行
dataG.delRow = function(rowId, rowIndex,event){
event.stopPropagation();
console.log(rowId);
$('#dg').datagrid('deleteRow', rowIndex);
//再重新渲染，防止删除这一行后，index发生变化
}
//查看某一行
dataG.seaRow = function(rowId,rowName,event){
event.stopPropagation();
console.log(rowId+ "" +rowName);
}
</script>
</html>
