jquery eaayui 学习datagrid

1.html:

1	<input type="button" id="btn" value="datagrid" />

2	<table id="tt"></table>

2.js:

01	$("#btn").click(function(){

02	$('#tt').datagrid({

03	striped:true,              //显示背景条文 默认false

04	url:'DataServlet',        //json数据源地址，要求格式 {'total':行总数,'rows':[{对象1},{对象2}...]}

05	columns:[[

06	{field:'code',title:'Code',width:100},

07	{field:'name',title:'Name',width:100},

08	{field:'price',title:'Price',width:100,align:'right'}

09

]] ,

10	// frozenColumns:[],             //什么玩意儿？？？

11	fitColumns:true ,            //自适应列宽, 默认 false

12	method:'get' ,              //请求方法类型 默认post

13	nowrap:true,              //数据超出列宽时自动截取 默认true

14	idField:'code',                //该列是唯一列,不能出现重复数据

15	loadMsg:'数据装载中...',          //默认  Processing, please wait …

16	pagination:false,                //是否使用分页工具 默认fasle

17	rownumbers:true ,              //是否显示行数（第一列之前） 默认false

18	singleSelect:true,             //true 则只能选中一行 默认false

19	// pageNumber:1,                     //这三个是分页参数

20	// pageSize:2,                    //默认10

21	// pageList:[5,10,15,20],           //默认 [10,20,30,40,50]

22	queryParams:{'pId':$("#pid").val()} ,              //请求数据时额外发送的参数  默认{}

23	sortName:'code'    ,              //默认排序列

24	sortOrder:'desc',               //asc 或desc 默认前者

25	remoteSort:true     ,              //是否使用远程数据排序？ 默认true

26	showFooter:true,                    //定义是否显示行底（如果是做统计表格，这里可以显示总计等）。????不懂。。。

27	rowStyler:function(index,row){              //返回样式，如：'background:red'

28	// index 行索引从0开始， row 对应行对象

29

return ;

30

},

31	loadFilter:function(data){          //数据过滤器 data:原始数据。可以将原始数据改变为规范的数据格式

32	//该函数必须返回包含 'total'和'rows'属性的标准数据对象。

33

}

34	//editors: {}                  //定义当编辑一行时的编辑模式。 默认predefined editors       ????不懂。。。

35	//view:{}                       //定义数据表格的视图。       ????不懂。。。

36

});

37

});

【一下大量代码抄袭网络】

001

/*

002	var initDatagrid = function(){

003	$dg = $("#tt");

004	$dg.datagrid({

005	title:'Datagrid测试',

006	width:700,

007	height:400,

008	url:'DataServlet',

009	columns :[[   {field : 'code',title : 'Code',width : 100,editor : "validatebox"},

010	{field : 'name',title : 'Name',width : 200,editor : "validatebox"},

011	{field : 'price',title : 'Price',width : 200,align : 'right',editor : "numberbox"}

012

]],

013	toolbar:[{

014	text : "添加",

015	iconCls : "icon-add",

016	handler : function() {

017	$('#winAdd').window('open');

018	$('#ff').show();

019	$('#ff').form('clear');

020	$('#ff').appendTo('#aa');

021

}

022

},{

023	text : "删除",

024	iconCls : "icon-remove",

025	handler : function() {

026

027

}

028

}]

029

});

030

};

031

032	var add = function(){

033

//数据提交后台

034	//datagrid 刷新一次

035

};

036

037	$(function(){

038	initDatagrid();

039

});

040

041

042

043

044

045

046

047

048

049

050

051

052

053

/*

054	var initDatagrid = function(){

055	var $dg = $("#dg");

056	$dg.datagrid({

057	url : "DataServlet",

058	width : 700,

059	height : 400,

060	columns : [[   {field : 'code',title : 'Code',width : 100,editor : "validatebox"},

061	{field : 'name',title : 'Name',width : 200,editor : "validatebox"},

062	{field : 'price',title : 'Price',width : 200,align : 'right',editor : "numberbox"}

063

]],

064	toolbar : [ {

065	text : "添加",

066	iconCls : "icon-add",

067	handler : function() {

068	$dg.datagrid('appendRow', {});   //添加一空行

069	var rows = $dg.datagrid('getRows'); //返回当前页的记录。

070	$dg.datagrid('beginEdit', rows.length - 1); //对最后一行（即新增的空行）开启编辑

071

}

072

},'-', {

073	text : "编辑",

074	iconCls : "icon-edit",

075	handler : function() {

076	var row = $dg.datagrid('getSelected');//获取当前选择行

077	if (row) {

078	var rowIndex = $dg.datagrid('getRowIndex', row);

079	$dg.datagrid('beginEdit', rowIndex);//根据行索引开启编辑

080

}

081

}

082

}, {

083	text : "删除",

084	iconCls : "icon-remove",

085	handler : function() {

086	var row = $dg.datagrid('getSelected');

087	if (row) {

088	var rowIndex = $dg.datagrid('getRowIndex', row);

089	$dg.datagrid('deleteRow', rowIndex); //接下来可以在后面加方法进行后台删除

090

}

091

}

092

}, {

093	text : "结束编辑",

094	iconCls : "icon-cancel",

095	handler : function(){

096	var rows = $dg.datagrid('getRows');

097	for ( var i = 0; i < rows.length; i++) {

098	$dg.datagrid('endEdit', i);

099

}

100

}

101

}, {

102	text : "保存",

103	iconCls : "icon-save",

104	handler : function() {

105

106	var rows = $dg.datagrid('getRows');

107	for ( var i = 0; i < rows.length; i++) {

108	$dg.datagrid('endEdit', i);

109

}

110

111	if ($dg.datagrid('getChanges').length) {//先判断是否有改动

112	var inserted = $dg.datagrid('getChanges', "inserted");

113	var deleted = $dg.datagrid('getChanges', "deleted");

114	var updated = $dg.datagrid('getChanges', "updated");

115

116	var effectRow = new Object();

117	if (inserted.length) {

118	effectRow["inserted"] = JSON.stringify(inserted);

119

}

120	if (deleted.length) {

121	effectRow["deleted"] = JSON.stringify(deleted);

122

}

123	if (updated.length) {

124	effectRow["updated"] = JSON.stringify(updated);

125

}

126

127	$.post("DataServlet", effectRow, function(rsp) {

128	$dg.datagrid('acceptChanges');

129	if (rsp.status) {

130	$.messager.alert("提示", "提交成功！");

131	$dg.datagrid('acceptChanges');

132

}

133	}, "JSON").error(function() {

134	$.messager.alert("提示", "提交错误了！");

135

});

136

}

137

}

138

} ]

139

});

140

141

}

142

143

144	$(function(){

145	initDatagrid();

146

147

});

148

149	<table id="dg" title="批量操作"></table> */

150

151

152

153

154

155

156

157

158	$(function() {

159	$("#btn").click(function(){

160	$('#tt').datagrid({

161	striped:true,              //显示背景条文 默认false

162	url:'DataServlet',        //json数据源地址，要求格式 {'total':行总数,'rows':[{对象1},{对象2}...]}

163	columns:[[

164	{field:'ck',checkbox:true}, //复选框

165	{field: 'oid',title: '选择',width: 20,formatter: function(value, rowData, rowIndex){ return '<input type="radio" name="selectRadio" id="selectRadio"' + rowIndex +'    value="' + rowData.oid + '" />';

166

}},

167	{field:'code',title:'Code',width:100},

168	{field:'name',title:'Name',width:100},

169	{field:'price',title:'Price',width:100,align:'right'}

170

]] ,

171	frozenColumns:[[

172	{field:'ck',checkbox:true}

173	]],           //什么玩意儿？？？

174	fitColumns:false ,            //自适应列宽, 默认 false

175	method:'post' ,              //请求方法类型 默认post

176	nowrap:true,              //数据超出列宽时自动截取 默认true

177	idField:'code',                //该列是唯一列,不能出现重复数据

178	loadMsg:'数据装载中...',          //默认  Processing, please wait …

179	pagination:false,                //是否使用分页工具 默认fasle

180	rownumbers:true ,              //是否显示行数（第一列之前） 默认false

181	singleSelect:true ,           //true 则只能选中一行 默认false

182	// pageNumber:1,                     //这三个是分页参数

183	// pageSize:2,                    //默认10

184	// pageList:[5,10,15,20],           //默认 [10,20,30,40,50]

185	// queryParams:{'pId':$("#pid").val()} ,              //请求数据时额外发送的参数  默认{}

186	// sortName:'code'    ,              //默认排序列

187	//  sortOrder:'desc',               //asc 或desc 默认前者

188	// remoteSort:true     ,              //是否使用远程数据排序？ 默认true

189	// showFooter:true,                    //定义是否显示行底（如果是做统计表格，这里可以显示总计等）。????不懂。。。

190	// rowStyler:function(index,row){              //返回样式，如：'background:red'

191	// index 行索引从0开始， row 对应行对象

192	//  return ;

193

//  },

194	//  loadFilter:function(data){          //数据过滤器 data:原始数据。可以将原始数据改变为规范的数据格式

195	//该函数必须返回包含 'total'和'rows'属性的标准数据对象。

196

// }

197	//editors: {}                  //定义当编辑一行时的编辑模式。 默认predefined editors       ????不懂。。。

198	//view:{}                       //定义数据表格的视图。       ????不懂。。。

199

200

201	onDblClickRow:function(){   //双击事件

202	var selected = $('#tt').datagrid('getSelected');  //获取选中行

203	if (selected){

204	alert(JSON.stringify(selected));

205	var index = $('#tt').datagrid('getRowIndex', selected); //获取选中行索引

206	alert("to delete row: "+index);

207	$('#tt').datagrid('deleteRow', index);               //前台删除行

208

}

209

}

210

});

211

});

212

213

214

});