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當中的寫法。