easyUI的简单之处

一、布局：

1、北边的布局，一般是查询条件

<div id="north" region="north" border="false" style="height:35x;">
<div>
<form id="searchFrom" method="post">
<table>
<tr>
<td><font size="2">车:</font></td>
<td><input name="car" /></td>
<td><font size="2">客户:</font></td>
<td><input name="customer" id="customer_name"/></td>
<td><font size="2">状态:</font></td>
<td><select name="status" class="easyui-combobox" data-options="editable:false">
<option value=""></option>
<option value="1">未处理</option>
<option value="0">已处理</option>
</select></td>
<td><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch()">查 询</a>
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-redo" onclick="$('#searchFrom').form('reset')">
重置</a>
</td>
</tr>
</table>
</form>
</div>
</div>

2、中间布局，一般是表格查询出来的数据

<div data-options="region:'center',title:''" border="false">
<table id="dg"></table>
</div>

3、新增修改一般弹出对话框及其关联的功能按钮

<div id="dlg_peccancy" class="easyui-dialog" style="padding:10px 20px"  closed="true" buttons="#dlg_peccancy-buttons">

</div>

<div id="dlg_peccancy-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" id="saveBtn" onclick="save()" style="90px">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg_peccancy').dialog('close')" style="90px">取消</a>
</div>

二、功能代码

1、条件搜索

function doSearch() {
var formData = $('#searchFrom').form('getData', true);
var jsonData = JSON.stringify(formData);
$("#dg").datagrid('load',{data:jsonData});
}

2、访问页面后加载表格数据

$(function () {
$('#frameId').combogrid({
url:getContextPath()+'/vanLicense/getCarCode.shtml?type=carCode',
panelWidth : 405,
panelHeight : 280,
idField : 'frameId',
textField : 'carCode',
fitColumns : true,
rownumbers : true,
resizable : true,
mode : 'remote',
pagination : true,
delay : 600,
columns :
[[{field:'carCode',title:'车牌号',80
}]],
onSelect:function(rowIndex, rowData){
$("#contactPhone").val(rowData.contactPhone);
}
});
loadPeccancyGrid();
});

function loadPeccancyGrid() {
$('#dg').datagrid({
'auto',
striped: true,
toolbar :'#toolbar',
singleSelect:true,
url: 'getPeccancyGroupById.shtml',
pagination: true,
rownumbers: true,
pageList: [15,20],
//onClickRow: onClickRow,
columns: [[
{title : 'ID',field : 'frameId',hidden:true},
{field: 'customer_company', title: '客户', 200, align: 'center'},
{field: 'customer_name', title: '联系人', 70, align: 'center'},
{field: 'customer_phone', title: '电话', 100, align: 'center'},
{field: 'carCode', title: '车', 70, align: 'center'}
]]
});
}

3、弹出新增修改对话框

function openAdd(){
$("#dlg_peccancy").dialog({
title : "新增信息",
modal : true,
closed : true,
width : 600,
height : 300
});
$('#dlg_peccancy').dialog('open');
$('#fm_peccancy').form('clear');
}

function openEdit(){
var row = $("#dg").datagrid("getSelected");
if(!row) {
$.messager.show({
title:'提示',
msg: "请选择一行记录",
timeout:2000,
showType:'slide'
});
return;
}
loadGrid();
$("#peccancy").dialog({
title : "修改信息",
modal : true,
closed : true,
width : 900,
height : 450
});
$('#peccancy').dialog('open');
$("#contactPhone").attr("readonly",true);
}