1.简单数据展现
3.columns特性
* 第二种 必须选择同步请求 异步的时候 datagraid已经把数据准备好了 数据已经显示好了
* 这种方式 返回 ajax方法 error回调方法会调用
* 让表单还原 $('#mysearch').form('clear');
$(function(){
$('#t_user').datagrid({
idField:'id' ,//只要创建数据表格 就必须要加 ifField
title:'用户列表' ,
width:1300 ,
height:450,
url:'UserServlet?method=getList' ,
fitColumns:true ,
rownumbers:true ,
striped: true ,//隔行变色特性
//nowrap: false ,//折行显示 为true 显示在一行
loadMsg: '数据正在加载,请耐心的等待...' ,
//singleSelect:true ,<span style="white-space:pre"> </span>//单选模式
//remoteSort: false ,
//sortName: 'salary' ,
//sortOrder: 'desc' ,
rowStyler: function(index ,record){
if(record.age > 25){
return "background:red";
}
// console.info(index);
// console.info(record);
} ,
frozenColumns:[[ //冻结列特性 ,不要与fitColumns 特性一起使用
{
field:'ck' ,
width:50 ,
checkbox: true
]],
columns:[[
{
field:'username' ,
title:'用户名' ,
width:100
},
{
field:'password' ,
title:'密码' ,
width:100
},{
field:'age' ,
title:'年龄' ,
width:100
},{
field:'sex' ,
title:'性别' ,
width:50
},{
field:'birthday' ,
title:'生日' ,
width:100
},{
field:'startTime' ,
title:'开始时间' ,
width:150
},{
field:'endTime' ,
title:'结束时间' ,
width:150
},{
field:'city' ,
title:'所属城市' ,
width:100
},{
field:'salary' ,
title:'薪水' ,
width:100
},{
field:'description' ,
title:'个人描述' ,
width:150
}
]]
});
});
* idField:'id' 只要创建数据表格 就必须要加 ifField 以后增删改查都要用到主键
* 冻结列特性 ,不要与fitColumns 特性一起使用 无效
* 冻结列属性和列属性都是二维数组 跨行跨列操作
* nowrap: false 计算机解析识别英文单词 和 汉子 英文字母 数字 认为你是一个整体
* remoteSort: false 默认是true 从数据库取回来是怎么排序就怎么排序
* sortName: 'salary' , sortOrder: 'desc' , 只有remoteSort为false 这两个才能用
* asc 升序 desc 倒序
* 数据表格后面空出一点是做滑轮用的
* rowStyler: function(index ,record) index 索引 是从0开始的 record 是一行的记录 是一个json对象
* console.info(index); 输出到控制台 firebug 控制台 全部 可以看到
* width 属性 都是数字 没有 px
2.分页实现
pagination:true,
pageSize: 10 ,
pageList:[5,10,15,20,50]* 每次选择当前页 每页显示多少记录 都会把参数传递给服务器 并发送请求
String json = "{\"total\":"+total+" , \"rows\":"+JSONArray.fromObject(ulist).toString()+"}";3.columns特性
{
field:'username' ,
title:'用户名' ,
width:100,
align:'center' ,
styler:function(value , record){
if(value == 'aaa'){
return 'background:blue;';
}
}
},{
field:'age' ,
title:'年龄' ,
width:100 ,
sortable : true
}* json格式 最后一个 不要逗号 好像要逗号也可以 中间的必须要有逗号
formatter:function(value , record , index){
if(value == 1){
return '<span style=color:red; >男</span>' ;
} else if( value == 2){
return '<span style=color:green; >女</span>' ;
}
//console.info(value);
//console.info(record);
//console.info(index);
},* span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化
{
field:'ck' ,
width:50 ,
checkbox: true,
}{
field:'city' ,
title:'所属城市' ,
width:100,
formatter:function(value , record , index){
if(value==1){
return '北京';
} else if(value == 2){
return '上海';
} else if(value == 3){
return '深圳';
} else if(value == 4){
return '长春';
}
/*
var str = '';
$.ajax({
type:'post' ,
url : 'UserServlet?method=getCityName' ,
cache:false ,
async: false , //同步请求
data:{id:value},
dataType:'json' ,
success:function(result){
str = result.name ;
}
});
return str ;
*/
}
}* 第二种 必须选择同步请求 异步的时候 datagraid已经把数据准备好了 数据已经显示好了
* 返回的是一个json对象 所以result可以直接用 对象. 的方式
* data可以是一个json对象 也可以是表单序列化过去
{
field:'description' ,
title:'个人描述' ,
width:150,
formatter:function(value , record , index){
return '<span title='+value+'>'+value+'</span>';
}
}4.增删改查
String str = "{'status':'ok' , 'message':'操作成功!'}";* 这种方式 返回 ajax方法 error回调方法会调用
$('#t_user').datagrid('reload');{
text:'新增用户' ,
iconCls:'icon-add' ,
handler:function(){
$('#mydialog').dialog({
title:'新增用户'
});
//$('#myform').find('input[name!=sex]').val("");
$('#myform').get(0).reset();
//$('#myform').form('clear');
$('#mydialog').dialog('open');
* 三种都可以对表单进行置空
* 第二种把jquery对象转换成dom对象 用dom方法进行置空
* 第三种 遇到单选框时 会把默认的给去掉
* 由于新增和修改都要用的是同一个dialog 当修改完后 title变成修改用户 再点击新增title还是修改用户 所以新增时还要改一下title 只要没刷新 jquery的效果还是在那里的
var flag ; //undefined 判断新增和修改方法 <input id="age" type="text" name="age" value="" />
$('#myform').form('load',{ //调用load方法把所选中的数据load到表单中,非常方便
id:arr[0].id ,
username:arr[0].username ,
password:arr[0].password ,
sex:arr[0].sex ,
age:arr[0].age ,
birthday:arr[0].birthday ,
city:arr[0].city ,
salary:arr[0].salary ,
startTime:arr[0].startTime,
endTime:arr[0].endTime ,
description:arr[0].description
});* 数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录。
* id一定要填
{
text:'删除用户' ,
iconCls:'icon-remove' ,
handler:function(){
var arr =$('#t_user').datagrid('getSelections');
if(arr.length <=0){
$.messager.show({
title:'提示信息!',
msg:'至少选择一行记录进行删除!'
});
} else {
$.messager.confirm('提示信息' , '确认删除?' , function(r){
if(r){
var ids = '';
for(var i =0 ;i<arr.length;i++){
ids += arr[i].id + ',' ;
}
ids = ids.substring(0 , ids.length-1);
$.post('UserServlet?method=delete' , {ids:ids} , function(result){
//1 刷新数据表格
$('#t_user').datagrid('reload');
//2 清空idField
//$('#t_user').datagrid('unselectAll');
//3 给提示信息
$.messager.show({
title:'提示信息!' ,
msg:'操作成功!'
});
});
} else {
return ;
}
});
}
}
}* 删完后 要调用datagrid的unseletAll方法 不然 选项会残留 删完一次后 不点选项删除 也可以删除 不会报错 直接在数据库删除已经删了的也不会报错
* 否定 直接return 什么事都不干
$('#searchbtn').click(function(){
$('#t_user').datagrid('load' ,serializeForm($('#mysearch')));
});String username = request.getParameter("username") == null?"":request.getParameter("username");<input name="username" class="easyui-validatebox" value="" />
$('#clearbtn').click(function(){
$('#mysearch').form('clear');
$('#t_user').datagrid('load' ,{});
});* 让表单还原 $('#mysearch').form('clear');
String order = request.getParameter("order")== null?"":request.getParameter("order"); //排序的方式
String sort = request.getParameter("sort")== null?"":request.getParameter("sort"); //排序的字段 * datagrid的load方法 加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据。 所以 排序失效
扫一扫
6642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
