jquery eaayui 学习（四）datagrid
1.html:
<input type="button" id="btn" value="datagrid" /> <table id="tt"></table>
2.js:
$("#btn").click(function(){
$('#tt').datagrid({
striped:true, //显示背景条文 默认false
url:'DataServlet', //json数据源地址，要求格式 {'total':行总数,'rows':[{对象1},{对象2}...]}
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]] ,
// frozenColumns:[], //什么玩意儿？？？
fitColumns:true , //自适应列宽, 默认 false
method:'get' , //请求方法类型 默认post
nowrap:true, //数据超出列宽时自动截取 默认true
idField:'code', //该列是唯一列,不能出现重复数据
loadMsg:'数据装载中...', //默认 Processing, please wait …
pagination:false, //是否使用分页工具 默认fasle
rownumbers:true , //是否显示行数（第一列之前） 默认false
singleSelect:true, //true 则只能选中一行 默认false
// pageNumber:1, //这三个是分页参数
// pageSize:2, //默认10
// pageList:[5,10,15,20], //默认 [10,20,30,40,50]
queryParams:{'pId':$("#pid").val()} , //请求数据时额外发送的参数 默认{}
sortName:'code' , //默认排序列
sortOrder:'desc', //asc 或desc 默认前者
remoteSort:true , //是否使用远程数据排序？ 默认true
showFooter:true, //定义是否显示行底（如果是做统计表格，这里可以显示总计等）。????不懂。。。
rowStyler:function(index,row){ //返回样式，如：'background:red'
// index 行索引从0开始， row 对应行对象
return ;
},
loadFilter:function(data){ //数据过滤器 data:原始数据。可以将原始数据改变为规范的数据格式
//该函数必须返回包含 'total'和'rows'属性的标准数据对象。
}
//editors: {} //定义当编辑一行时的编辑模式。 默认predefined editors ????不懂。。。
//view:{} //定义数据表格的视图。 ????不懂。。。
});
});
【一下大量代码抄袭网络】
/*
var initDatagrid = function(){
$dg = $("#tt");
$dg.datagrid({
title:'Datagrid测试',
width:700,
height:400,
url:'DataServlet',
columns :[[ {field : 'code',title : 'Code',width : 100,editor : "validatebox"},
{field : 'name',title : 'Name',width : 200,editor : "validatebox"},
{field : 'price',title : 'Price',width : 200,align : 'right',editor : "numberbox"}
]],
toolbar:[{
text : "添加",
iconCls : "icon-add",
handler : function() {
$('#winAdd').window('open');
$('#ff').show();
$('#ff').form('clear');
$('#ff').appendTo('#aa');
}
},{
text : "删除",
iconCls : "icon-remove",
handler : function() {
}
}]
});
};
var add = function(){
//数据提交后台
//datagrid 刷新一次
};
$(function(){
initDatagrid();
});
/*
var initDatagrid = function(){
var $dg = $("#dg");
$dg.datagrid({
url : "DataServlet",
width : 700,
height : 400,
columns : [[ {field : 'code',title : 'Code',width : 100,editor : "validatebox"},
{field : 'name',title : 'Name',width : 200,editor : "validatebox"},
{field : 'price',title : 'Price',width : 200,align : 'right',editor : "numberbox"}
]],
toolbar : [ {
text : "添加",
iconCls : "icon-add",
handler : function() {
$dg.datagrid('appendRow', {}); //添加一空行
var rows = $dg.datagrid('getRows'); //返回当前页的记录。
$dg.datagrid('beginEdit', rows.length - 1); //对最后一行（即新增的空行）开启编辑
}
},'-', {
text : "编辑",
iconCls : "icon-edit",
handler : function() {
var row = $dg.datagrid('getSelected');//获取当前选择行
if (row) {
var rowIndex = $dg.datagrid('getRowIndex', row);
$dg.datagrid('beginEdit', rowIndex);//根据行索引开启编辑
}
}
}, {
text : "删除",
iconCls : "icon-remove",
handler : function() {
var row = $dg.datagrid('getSelected');
if (row) {
var rowIndex = $dg.datagrid('getRowIndex', row);
$dg.datagrid('deleteRow', rowIndex); //接下来可以在后面加方法进行后台删除
}
}
}, {
text : "结束编辑",
iconCls : "icon-cancel",
handler : function(){
var rows = $dg.datagrid('getRows');
for ( var i = 0; i < rows.length; i++) {
$dg.datagrid('endEdit', i);
}
}
}, {
text : "保存",
iconCls : "icon-save",
handler : function() {
var rows = $dg.datagrid('getRows');
for ( var i = 0; i < rows.length; i++) {
$dg.datagrid('endEdit', i);
}
if ($dg.datagrid('getChanges').length) {//先判断是否有改动
var inserted = $dg.datagrid('getChanges', "inserted");
var deleted = $dg.datagrid('getChanges', "deleted");
var updated = $dg.datagrid('getChanges', "updated");
var effectRow = new Object();
if (inserted.length) {
effectRow["inserted"] = JSON.stringify(inserted);
}
if (deleted.length) {
effectRow["deleted"] = JSON.stringify(deleted);
}
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
}
$.post("DataServlet", effectRow, function(rsp) {
$dg.datagrid('acceptChanges');
if (rsp.status) {
$.messager.alert("提示", "提交成功！");
$dg.datagrid('acceptChanges');
}
}, "JSON").error(function() {
$.messager.alert("提示", "提交错误了！");
});
}
}
} ]
});
}
$(function(){
initDatagrid();
});
<table id="dg" title="批量操作"></table> */
$(function() {
$("#btn").click(function(){
$('#tt').datagrid({
striped:true, //显示背景条文 默认false
url:'DataServlet', //json数据源地址，要求格式 {'total':行总数,'rows':[{对象1},{对象2}...]}
columns:[[
{field:'ck',checkbox:true}, //复选框
{field: 'oid',title: '选择',width: 20,formatter: function(value, rowData, rowIndex){ return '<input type="radio" name="selectRadio" id="selectRadio"' + rowIndex + ' value="' + rowData.oid + '" />';
}},
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]] ,
frozenColumns:[[
{field:'ck',checkbox:true}
]], //什么玩意儿？？？
fitColumns:false , //自适应列宽, 默认 false
method:'post' , //请求方法类型 默认post
nowrap:true, //数据超出列宽时自动截取 默认true
idField:'code', //该列是唯一列,不能出现重复数据
loadMsg:'数据装载中...', //默认 Processing, please wait …
pagination:false, //是否使用分页工具 默认fasle
rownumbers:true , //是否显示行数（第一列之前） 默认false
singleSelect:true , //true 则只能选中一行 默认false
// pageNumber:1, //这三个是分页参数
// pageSize:2, //默认10
// pageList:[5,10,15,20], //默认 [10,20,30,40,50]
// queryParams:{'pId':$("#pid").val()} , //请求数据时额外发送的参数 默认{}
// sortName:'code' , //默认排序列
// sortOrder:'desc', //asc 或desc 默认前者
// remoteSort:true , //是否使用远程数据排序？ 默认true
// showFooter:true, //定义是否显示行底（如果是做统计表格，这里可以显示总计等）。????不懂。。。
// rowStyler:function(index,row){ //返回样式，如：'background:red'
// index 行索引从0开始， row 对应行对象
// return ;
// },
// loadFilter:function(data){ //数据过滤器 data:原始数据。可以将原始数据改变为规范的数据格式
//该函数必须返回包含 'total'和'rows'属性的标准数据对象。
// }
//editors: {} //定义当编辑一行时的编辑模式。 默认predefined editors ????不懂。。。
//view:{} //定义数据表格的视图。 ????不懂。。。
onDblClickRow:function(){ //双击事件
var selected = $('#tt').datagrid('getSelected'); //获取选中行
if (selected){
alert(JSON.stringify(selected));
var index = $('#tt').datagrid('getRowIndex', selected); //获取选中行索引
alert("to delete row: "+index);
$('#tt').datagrid('deleteRow', index); //前台删除行
}
}
});
});
});