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="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="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="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="80px; height:35px;" href="#" class="easyui-linkbutton" onclick="addChannel()" data-options="iconCls:'icon-add'">新增</a> <a style="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="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="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="80px">确认</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel('addChannel')" style="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="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="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="80px">确认</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel('editChannel')" style="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, 50}, {field:'productName',align:'center',title:'产品名', 50}, {field:'channelName',align:'center',title:'渠道名称', 50}, {field:'channelCode',align:'center',title:'渠道登录编码', 50}, {field:'status',align:'center',title:'渠道状态',formatter:formatterFieldStatus, 50}, {field:'operator',align:'center',title:'操作',formatter:formatterFieldOperator, 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: '新增渠道', 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: '修改渠道', 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="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="120px;"> </span> <span style="margin:5px"> 渠道状态： <select class="easyui-combobox" name="channelStatus" style="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="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="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="80px">确认</button> <button class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel('addChannel')" style="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="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="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="80px">确认</button> <button class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel('editChannel')" style="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, 50}, { field: 'appChannel', align: 'center', title: '产品名', formatter: formatterFieldAppChannel, 50 }, {field:'channelName',align:'center',title:'渠道名称', 50}, {field:'channelCode',align:'center',title:'渠道编码', 50}, { field: 'channelStatus', align: 'center', title: '渠道状态', formatter: formatterFieldChannelStatus, 50 }, {field:'operator',align:'center',title:'操作',formatter:formatterFieldOperator, 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: '新增渠道', 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: '修改渠道', 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当中的写法。