項目当中使用的easyui的模板crud页面
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当中的写法。
項目当中使用的easyui的模板crud页面的更多相关文章
- 「Ionic」創建新項目
1.創建新項目 创建一个名为myApp的还有tabs的项目(ionic start <project-name> <optional-template>) 可选模板为sidem ...
- 部署ASP.Net Core 2.1 項目到 IIS
用Asp.net core 2.1 寫了一個小的系統框架,記錄一下部署過程: 1. 首先是安裝 IIS 了,從 控制面板→程序→启用或关闭Windows功能→勾选Internet Informatio ...
- 在項目中快速部署SLF4J+LOGBACK
想了解SLF4J,LOGBACK是什么?可以访问:http://www.slf4j.org/ http://logback.qos.ch/ 本文大部分参考了Cody Burleson<Ho ...
- p2p項目”復活“之想
http://blog.csdn.net/christopherwu/article/details/23976503 原來以為p2p項目就要夭折,墮入絕望無奈的深淵之時,與多位朋友的交流,抬頭看見了 ...
- 如何在版本控制工具中管理Sencha Architect的項目
根據數次痛苦的經歷結合stack overflow上的解答,發現原來還是可以使用svn.git之類的版本控制工具管理Sencha Architect生成的項目的. 具體的要點如下,假定項目記作{PRO ...
- 反射实体自动生成EasyUi DataGrid模板
用EasyUi Datagrid展示数据的时候总是要一下这样一段代码 <table id="dt" class="easyui-datagrid"> ...
- ionic3 环境配置 ＋ 運行第一個項目
1.首先我們先下載個 nodejs安裝包 地址:https://nodejs.org/en/ 安裝 檢查是否安裝成功,打開命令提示符 輸入 node -v 回車 查看版本 結果: 2.安裝ionic ...
- 樹莓派3B運行.Net Core2.1 Web 項目
安裝.Net Core 運行時和SDK(非必選) 下載地址 安裝 # 安裝運行時 sudo apt-get -y update # Install the packages necessary for ...
- 使用TFS創建團隊項目
使用微軟賬號登錄Team Service,關聯一個TS賬戶,用來存放你所有的項目,可以從瀏覽器中直接訪問,地址類似yourname.visualstudio.com. 詳細鏈接 在TS賬戶主面板中,可 ...
随机推荐
- WCF开发框架形成之旅--个人图片信息的上传保存
WCF开发框架形成之旅--个人图片信息的上传保存 http://www.cnblogs.com/wuhuacong/archive/2011/12/23/2299614.html 一般在业务系统里面, ...
- 【Linux】linux常用查看命令
查看磁盘大小的命令df .du df -h 查看整台服务器的硬盘使用情况 du -sh * 查看每个文件夹的大小 ps -ef 查看所有进程 top 实时显示进程状态用户 free -m 查看内存使用 ...
- 20181013xlVba成绩报表优化
Public Sub 成绩报表优化() Application.ScreenUpdating = False Application.DisplayAlerts = False Application ...
- 微信小程序分享
点击链接查看详情:(转发的路径的必须写正确) https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html
- ActiveMQ的学习整理（代码实现PTP，以及Pub/Sub）
(一)由于在实习过程中需要用到ActiveMQ,在网上看了很多文章,现在整理出来以防忘记. (二)这篇文章比较适合之前没有接触过的同学,在看下面文章的过程中,建议先学习参考链接中的知识点,然后自己再参 ...
- 51nod1647 小Z的trie
题意:给你n个字符串,m次查询,每次问你第p个字符串的s到t的字符串在n个字符串建成的字典树上出现了多少次 题解:先建出字典树,在字典树上拓展sam,记录每个子串的出现次数.查询时只需找出在字典树上的 ...
- Matlab-9:中心差分方法解常微分算例（SOR完整版）
函数文件: function [x,n,flag]=sor(A,b,eps,M,max1) %sor函数为用松弛迭代法求解线性方程组 %A为线性方程组的系数矩阵 %b为线性方程组的常数向量 %eps为 ...
- Leetcode 868. 二进制间距
868. 二进制间距 显示英文描述 我的提交返回竞赛 用户通过次数201 用户尝试次数220 通过次数207 提交次数396 题目难度Easy 给定一个正整数 N,找到并返回 N 的二进制表示中 ...
- lua 函数基础
函数定义在前,调用在后 如果函数只有一个实参,并且此参数是一个字面字符串或者table构造式,那么可以省略() 例如 print "hello" unpack{1,2} print ...
- Redshift中查看database、schema、table数据大小
1. 查看当前数据库大小以及记录行数 select trim(pgdb.datname) as database, sum(b.mbytes) as mbytes, sum(a.rows) as ro ...