一、布局：

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" οnclick="doSearch()">查 询</a>

<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-redo" οnclick="$('#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" οnclick="save()" style="width:90px">保存</a>

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg_peccancy').dialog('close')" style="width: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:'车牌号',width:80

}]],

onSelect:function(rowIndex, rowData){

$("#contactPhone").val(rowData.contactPhone);

}

});

loadPeccancyGrid();

});

 

function loadPeccancyGrid() {

$('#dg').datagrid({

width: '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: '客户', width: 200, align: 'center'},

{field: 'customer_name', title: '联系人', width: 70, align: 'center'},

{field: 'customer_phone', title: '电话', width: 100, align: 'center'},

{field: 'carCode', title: '车', width: 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);

}