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();
一、DataGrid
扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。
DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
2.用法:
创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。
案例
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'code'">编码</th>
<th data-options="field:'name'">名称</th>
<th data-options="field:'price'">价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td><td>名称1</td><td>2323</td>
</tr>
<tr>
<td>002</td><td>名称2</td><td>4612</td>
</tr>
</tbody>
</table>
通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。
<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">编码</th>
<th data-options="field:'name',width:100">名称</th>
<th data-options="field:'price',width:100,align:'right'">价格</th>
</tr>
</thead>
</table>
<table id="dg"></table>
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'代码',width:100},
{field:'name',title:'名称',width:100},
{field:'price',title:'价格',width:100,align:'right'}
]]
});