1、简单的增删改查页面：
第一步骤：html原型型编写，写法参照了easyui demo中form有关html等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>渠道管理</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script> <style>
body{
font-size:14px;
}
.search-button {
width:100px;
}
</style> </head>
<body>
<div class="search">
<form id="channelManageForm">
<span style="margin:5px">
产品：
<select class="easyui-combobox" name="productId" style="width:120px;">
<option value="001">速米袋</option>
<option value="002">分期专家</option>
<option value="003">随时花</option>
</select>
</span>
<span style="margin:5px">
渠道名称：
<select class="easyui-combobox" name="channelCode" style="width:120px;">
<option value="">全部</option>
<option value="mlh">米来花</option>
<option value="xgjq">西瓜借钱</option>
</select>
</span>
<span style="margin:5px">
渠道状态：
<select class="easyui-combobox" name="channelStatus" style="width:120px;">
<option value="">全部</option>
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
</span>
<span style="margin:5px">
<a href="#" class="easyui-linkbutton search-button search" iconCls="icon-search">查询</a>
</span>
<span style="margin:5px">
<a href="#" class="easyui-linkbutton search-button reset" iconCls="icon-reload">重置</a>
</span>
<span style="margin:5px">
<a href="#" class="easyui-linkbutton search-button add" data-options="iconCls:'icon-add'">新增</a>
</span>
</form>
</div> <!--
<div class="toolbar" style="margin:5px;">
<a style="width:80px; height:35px;" href="#" class="easyui-linkbutton" onclick="addChannel()" data-options="iconCls:'icon-add'">新增</a>
<a style="width:80px; height:35px;" href="#" class="easyui-linkbutton" onclick="editChannel()" data-options="iconCls:'icon-edit'">编辑</a>
</div>
--> <div id="table-list">
</div> <div id="addChannel" style="display:none">
<form id="addChannelForm" class="easyui-form">
<div style="margin:20px">
<select class="easyui-combobox" name="productId" label="产品" style="width:80%">
<option value="001">速米袋</option>
<option value="002">分期专家</option>
<option value="003">随时花</option>
</select>
</div>
<div style="margin:20px">
<input class="easyui-textbox" name="channelName" style="width:80%" data-options="label:'渠道名:',required:true">
</div>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton submit" iconCls="icon-save" style="width:80px">确认</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel('addChannel')" style="width:80px">取消</a>
</div>
</form> </div> <div id="editChannel" style="display:none">
<form id="editChannelForm" class="easyui-form">
<div style="margin:20px">
<select class="easyui-combobox" name="productId" label="产品" style="width:80%;" disabled>
<option value="001">速米袋</option>
<option value="002">分期专家</option>
<option value="003">随时花</option>
</select>
</div>
<div style="margin:20px">
<input class="easyui-textbox" name="channelName" style="width:80%" data-options="label:'渠道名:',required:true">
</div>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton submit" iconCls="icon-save" style="width:80px">确认</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel('editChannel')" style="width:80px">取消</a>
</div>
</form> </div> <script type="text/javascript">
$(function(){
$("#table-list").datagrid({
title: "渠道推广列表",
fitColumns:true,
pagination:true,
//url: basePath + '/commonContentManage/structure/queryStructure',
data:[
{channelNo:"001",productName:"速米袋",channelName:"米来花",channelCode:"10110001",status:1},
{channelNo:"002",productName:"速米袋",channelName:"西瓜借钱",channelCode:"10110002",status:0}
],
//url:'channel_data.json',
singleSelect: true,
columns:[[
{field:'channelNo',hidden:true, width:50},
{field:'productName',align:'center',title:'产品名', width:50},
{field:'channelName',align:'center',title:'渠道名称', width:50},
{field:'channelCode',align:'center',title:'渠道登录编码', width:50},
{field:'status',align:'center',title:'渠道状态',formatter:formatterFieldStatus, width:50},
{field:'operator',align:'center',title:'操作',formatter:formatterFieldOperator, width:50}
]], onBeforeLoad: function (param) {
var firstLoad = $(this).attr("firstLoad");
if (firstLoad == "false" || typeof (firstLoad) == "undefined")
{
$(this).attr("firstLoad","true");
return false;
}
return true;
},
checkOnSelect: false
}); //查询按钮
$("#channelManageForm .search").click(function(){
$("#table-list").datagrid('load',getFormObj("channelManageForm"));
}); //重置按钮
$("#channelManageForm .reset").click(function(){
$("#channelManageForm").form('reset');
}); //新增按钮
$("#channelManageForm .add").click(function(){
addChannel();
}); function formatterFieldStatus(value, row, index){
return status == 1 ? "禁用" : "启用";
} function formatterFieldOperator(value, row, index){
var changeStatus = "";
if(row.status == '1'){
changeStatus = "<a href='#' style='text-decoration:none;' onclick='changeStatus(\"0\")'>禁用</a>";
}else{
changeStatus = "<a href='#' style='text-decoration:none;' onclick='changeStatus(\"1\")'>启用</a>";
} var edit = "<a href='#' style='text-decoration:none;' onclick='editChannel(\""+ row.channelNo + "\")'>编辑</a>";
return changeStatus + " " + edit;
} //新增渠道点击保存按钮
$("#addChannelForm .submit").click(function(){ $("#addChannelForm").form('submit',{
url:'',
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // hide progress bar while the form is invalid
}
return isValid; // return false will stop the form submission
},
success: function(){
var datas = JSON.parse(data);
if (datas.success == "true"){
$.messager.alert('操作结果', datas.message, 'info');
$("#addChannel").dialog('close');
} else{
$.messager.alert('操作结果', datas.message, 'error');
}
}
}); }); //修改渠道点击保存按钮
$("#editChannelForm .submit").click(function(){ $("#editChannelForm").form('submit',{
url:'',
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // hide progress bar while the form is invalid
}
return isValid; // return false will stop the form submission
},
success: function(){
var datas = JSON.parse(data);
if (datas.success == "true"){
$.messager.alert('操作结果', datas.message, 'info');
$("#editChannel").dialog('close');
} else{
$.messager.alert('操作结果', datas.message, 'error');
}
}
}); });
}); function changeStatus(status){
var message = "确定要";
if(status == '1'){
message += "启用吗？";
}else{
message += "禁用吗？";
}
$.messager.confirm("confirm", message, function(r){
if (r){
$.messager.alert("提示","操作成功！","info");
}
});
} /**
* 增加页面
*/
function addChannel() {
$("#addChannel").dialog({
title: '新增渠道',
width:400,
height:300,
closed:false,
cache:false,
modal:true,
onClose: function () {
//$(this).dialog('destroy').remove();
$("#table-list").datagrid('reload', getFormObj("channelManageForm"));
}
});
} /**
* 修改页面
*/
function editChannel(channelNo) {
//var row = $('#table-list').datagrid('getSelected');
//if (row) {
$('#editChannelForm').form('load', {
productId:'001',
channelName:'米来花'
});
$("#editChannel").dialog({
title: '修改渠道',
width:400,
height:300,
closed:false,
cache:false,
modal:true,
onClose: function () {
//$(this).dialog('destroy').remove();
$("#table-list").datagrid('reload', getFormObj("channelManageForm"));
}
});
//}else{
// $.messager.alert("提示","请选中要修改的行！","warning");
//} } /**
* 取消
*/
function cancel(obj){
$("#"+obj).dialog('close');
} /**
* 获取表单数据，并将其转换为对象
*/
function getFormObj(formId) {
var formObj = {};
var inputs = $('#'+formId).serializeArray();
$.each(inputs, function (i, input) {
formObj[input.name] = input.value;
});
return formObj;
} </script> </body>
</html>
2、项目当中实际使用的ftl文件，我将js也嵌入了其中：
<#import "../../master/master-html.ftl" as html/>
<@html.html>
<@html.head title="渠道管理" description="" keywords=" ">
<style>
body {
font-size: 14px;
} .search-button {
width: 100px;
}
</style>
</@html.head>
<body>
<div class="search">
<form id="channelManageForm">
<span style="margin:5px">
产品：
<select class="easyui-combobox" name="appChannel" style="width:120px;"
data-options="
url:basePath + '/promotion/channel/getUserProductList',
valueField:'code',
textField:'description',
onLoadSuccess:function(){
var data = $(this).combobox('getData');
for (var item in data[0]) {
$(this).combobox('select', data[0]['code']);
}
}
" editable='false' >
</select>
</span>
<span style="margin:20px">
渠道名称： <input class="easyui-textbox" name="channelName" style="width:120px;">
</span>
<span style="margin:5px">
渠道状态：
<select class="easyui-combobox" name="channelStatus" style="width:120px;">
<option value="">全部</option>
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
</span>
<span style="margin:5px">
<a href="#" class="easyui-linkbutton search-button search" iconCls="icon-search">查询</a>
</span>
<span style="margin:5px">
<a href="#" class="easyui-linkbutton search-button reset" iconCls="icon-reload">重置</a>
</span>
<span style="margin:5px">
<a href="#" class="easyui-linkbutton search-button add" data-options="iconCls:'icon-add'">新增</a>
</span>
</form>
</div> <div id="table-list">
</div> <div id="addChannel" style="display:none">
<form id="addChannelForm" method="post">
<div style="margin:20px">
<input class="easyui-combobox" name="appChannel" style="width:280px;"
data-options="
url:basePath + '/promotion/channel/getUserProductList',
valueField:'code',
textField:'description',
label:'产品:'" editable=’false’ required>
</input>
</div>
<div style="margin:20px">
<input class="easyui-textbox" name="channelName" style="width:280px;" data-options="label:'渠道名:',required:true">
</div>
<div style="text-align:center;padding:5px 0">
<button type="submit" class="easyui-linkbutton" iconCls="icon-save" style="width:80px">确认</button>
<button class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel('addChannel')" style="width:80px">取消</button>
</div>
</form> </div> <div id="editChannel" style="display:none">
<form id="editChannelForm" class="easyui-form" method="post">
<input type="hidden" name="channelNo"/>
<div style="margin:20px">
<select class="easyui-combobox" name="appChannel" style="width:280px;"
data-options="
url:basePath + '/promotion/channel/getUserProductList',
valueField:'code',
textField:'description', label:'产品'" disabled>
</select>
</div>
<div style="margin:20px">
<input class="easyui-textbox" name="channelName" style="width:280px;" data-options="label:'渠道名:',required:true">
</div>
<div style="text-align:center;padding:5px 0">
<button type="submit" class="easyui-linkbutton" iconCls="icon-save" style="width:80px">确认</button>
<button class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel('editChannel')" style="width:80px">取消</button>
</div>
</form> </div> <script type="text/javascript">
$(function(){ var appList;
initEmbellishData(); function initEmbellishData() {
$.ajax({
url: basePath + "/promotion/channel/getEmbellishResource",
method: 'get',
dataType: "json",
success: function (data) {
appList = data["appList"];
}
});
} $("#table-list").datagrid({
title: "渠道推广列表",
fitColumns:true,
pagination:true,
url: basePath + '/promotion/channel/queryChannel',
singleSelect: true,
columns:[[
{field:'channelNo',hidden:true, width:50},
{
field: 'appChannel',
align: 'center',
title: '产品名',
formatter: formatterFieldAppChannel,
width: 50
},
{field:'channelName',align:'center',title:'渠道名称', width:50},
{field:'channelCode',align:'center',title:'渠道编码', width:50},
{
field: 'channelStatus',
align: 'center',
title: '渠道状态',
formatter: formatterFieldChannelStatus,
width: 50
},
{field:'operator',align:'center',title:'操作',formatter:formatterFieldOperator, width:50}
]], onBeforeLoad: function (param) {
var firstLoad = $(this).attr("firstLoad");
if (firstLoad == "false" || typeof (firstLoad) == "undefined")
{
$(this).attr("firstLoad","true");
return false;
}
return true;
},
checkOnSelect: false
}); function formatterFieldAppChannel(value, row, index) {
var app;
for (var i = 0; i < appList.length; i++) {
app = appList[i];
if (app["code"] == value) {
return app["description"];
}
}
return value;
} function formatterFieldChannelStatus(value, row, index) {
return row.channelStatus == '1' ? "启用" : "禁用";
} function formatterFieldOperator(value, row, index){
var changeStatus = "";
if (row.channelStatus == '1') {
changeStatus = "<a href='#' style='text-decoration:none;' onclick=\"changeChannelStatus('" + row.channelNo + "' ,'0')\">禁用</a>";
}else{
changeStatus = "<a href='#' style='text-decoration:none;' onclick=\"changeChannelStatus('" + row.channelNo + "' ,'1')\">启用</a>";
} var edit = "<a href='#' style='text-decoration:none;' onclick=\"editChannel('"+ row.channelNo + "')\">编辑</a>";
return changeStatus + " " + edit;
} //查询按钮
$("#channelManageForm .search").click(function(){
var appChannel = $("#channelManageForm [name=appChannel]").val();
if (appChannel == '' || appChannel == null || appChannel == 'undefined') {
$.messager.alert('提示','产品必须选择','warn');
}else{
$("#table-list").datagrid('load',getFormObj("channelManageForm"));
} }); //重置按钮
$("#channelManageForm .reset").click(function(){
$("#channelManageForm").form('reset');
}); //新增按钮
$("#channelManageForm .add").click(function(){
addChannel();
}); $("#addChannelForm").form({
url: basePath + '/promotion/channel/addChannel',
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // hide progress bar while the form is invalid
}
return isValid; // return false will stop the form submission
},
success: function (data) {
var datas = JSON.parse(data);
if (datas.code == "200") {
$.messager.alert('操作结果', datas.desc, 'info');
$("#addChannel").dialog('close');
$("#table-list").datagrid('reload', getFormObj("channelManageForm"));
} else{
$.messager.alert('操作结果', datas.desc, 'error');
}
}
}); $("#editChannelForm").form({
url: basePath + '/promotion/channel/editChannel',
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // hide progress bar while the form is invalid
}
return isValid; // return false will stop the form submission
},
success: function (data) {
var datas = JSON.parse(data);
if (datas.code == "200") {
$.messager.alert('操作结果', datas.desc, 'info');
$("#editChannel").dialog('close');
$("#table-list").datagrid('reload', getFormObj("channelManageForm"));
} else{
$.messager.alert('操作结果', datas.desc, 'error');
}
}
}); }); function changeChannelStatus(channelNo, channelStatus) {
var message = "确定要";
if (channelStatus == '1') {
message += "启用吗？";
}else{
message += "禁用吗？";
}
$.messager.confirm("confirm", message, function(r){
if (r){
$.ajax({
url: basePath + "/promotion/channel/changeChannelStatus",
method: 'post',
dataType: "json",
data: 'channelNo=' + channelNo + "&channelStatus=" + channelStatus,
success: function (data) {
if (data.code == '200') {
$.messager.alert("提示", data.desc, "info");
$("#table-list").datagrid('reload', getFormObj("channelManageForm"));
} else {
$.messager.alert("提示", data.desc, "error");
}
}
});
}
});
} /**
* 增加页面
*/
function addChannel() {
$("#addChannel").dialog({
title: '新增渠道',
width:400,
height:300,
closed:false,
cache:false,
modal:true,
onClose:function(){
$('#addChannelForm').form('clear');
}
});
} /**
* 修改页面
*/
function editChannel(channelNo) {
$('#editChannelForm').form('load', basePath + '/promotion/channel/loadChannel?channelNo=' + channelNo);
$("#editChannel").dialog({
title: '修改渠道',
width:400,
height:300,
closed:false,
cache:false,
modal:true
}); } /**
* 取消
*/
function cancel(obj){
$("#"+obj).dialog('close');
} </script> </body>
</@html.html>
这里使用了ajax+js的 initEmbellishData 做数据回显
使用了datagrid控件做分页查询
使用 combobox 做下拉框异步以及级联
使用from部分的load、clear、validate、submit进行数据加载、清除、校验、提交等
datagrid的方法formatter的方法格式可以参考一下，感觉比较有美感
onBeforeLoad这里的写法是让第一次访问不会进行查询
checkOnSelect这里是为了选择单行的时候checkbox不会被选择
combobox中选中加载中的第一个放在onLoadSuccess方法里面
getFormObject是放在工具类的方法，是将from的表单内容拼接为object的json吧，代码在html有。dialog中数据清除和reload与load from这里可以借鉴借鉴，这里参考的是demo当中的写法。