1.DataGrid
1.1 DataGrid基本属性
1.1.1 基本属性
url : '', // 初始化请求路径
fitcolumns : false, // 列宽自适应
singleSelect : true, // 是否选中单行
checkOnSelect : true, // 点击行选中时该checkbox选中或取消选中
rownumbers:true, // 行号
fit : true, // 高宽自适应
border : false, // 是否显示边框
title : '书本列表', // datagrid标题
striped : true, // 显示斑马线效果
1.1.2 toobar属性(增删改)
toolbar : "#tb", // 自定义工具栏
1.1.3 formatter单元格格式化
1.1.4 styler单元格样式
1.1.5 sorter
1.1.6 editor
1.2 DataGrid事件
1.2.1 onDblClickRow双击行事件
onDblClickRow:function(index,row){}
1.2.2 按钮点击查询
//查询参数
var param={
'bookName':$('#bookname').val(),
'methodName':'query'
};
var options = $('#dg').datagrid('options');
//指定请求Url地址
options.url="bookAction.action";
//开始加载数据
$('#dg').datagrid('load', param);
1.3 DataGrid分页
1.3.1 属性设置
pagination:true, // 是否分页
pageNumber:1, // 初始化页码
pageSize:10, // 初始化每页显示条数
1.3.2 请求/响应参数格式要求
Request请求:{"page":页码,"rows":每页多少条记录}
Response响应:{"total":总记录数,"rows":[{数据项1},{数据项2},{数据项3},...]}
2.Dialog对话框窗口
width : 400,
height : 292,
modal : true,
draggable : true,
collapsible : false,
minimizable : false,
maximizable : false,
title : '编辑书本信息',
buttons:"#dlg-buttons",
href:'bookDetail.jsp',
onLoad:function(){
//赋值
$('#ff').form('load',row);
//重置
$('#ff').form('reset');
}
3.Message消息窗口
3.1 $.messager.alert
3.2 $.messager.confirm
4.Form表单
$('#ff').form("submit",{
url:'',
onSubmit: function(){
//form表单验证
return $(this).form('validate');
},
success:function(data){
}
});
//form表单序列化
$('#ff').serialize();