*功能按钮在同一行
引入页
<%@ page contentType="text/html; charset=UTF-8" language="java"
import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String root = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort() + path + "/";
String newsPath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript">
var root = "<%=path%>/"; //js中存放当前页面的root路径方便调用
var urlAddress = "<%=urlAddress%>";
var path = "<%=path%>";
</script>
<script type="text/javascript"
src="<%=path%>/Web/common/js/jquery-1.4.4.min.js"></script>
数据列表页
<%@ page contentType="text/html; charset=UTF-8" language="java"
import="java.util.*" pageEncoding="UTF-8"%><%@include file="/Web/common/page/jqueryadmin.jsp"%>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9, IE=8, chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>推广合作用户管理</title>
<link rel="stylesheet" type="text/css"
href="<%=path%>/Web/comspread/css/easyui.css" />
<link rel="stylesheet" type="text/css"
href="<%=path%>/Web/comspread/css/icon.css">
<link rel="stylesheet" type="text/css"
href="<%=path%>/Web/comspread/css/window.css" />
<link rel="stylesheet" type="text/css"
href="<%=path%>/Web/comspread/css/datagrid.css" />
<script type="text/javascript"
src="<%=path%>/Web/comspread/js/comspread.js"></script>
<script type="text/javascript"
src="<%=path%>/Web/comspread/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=path%>/Web/common/js/easyui/js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="comSpreadData" class="easyui-datagrid" style="width:auto;"></table>
<!-- <script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
$('#comSpreadData').datagrid('resize');
});
var comSpread = new ComSpread();
comSpread.ctx = path;
comSpread.createDataGrid();
});
</script> -->
<div id="addData-window" style="width:265px;height:175px;font-size: 16" title="添加数据">
</div>
<div id="updateData-window" style="width:350px;height:230px;font-size: 16" title="更新数据">
</div>
<script type="text/javascript">
$(document).ready(function (){
//判断是否从注册页面来的跳转
<c:if test="${ empty sessionScope.manage }">
//如果非法链接
window.location.href = "<%=path%>/system/login.shtml";
</c:if>
<c:if test="${not empty sessionScope.manage}">
$(window).resize(function() {
$('#comSpreadData').datagrid('resize');
});
var comSpread = new ComSpread();
comSpread.ctx = path;
comSpread.createDataGrid();
</c:if>
});
</script>
</body>
</html>
数据加载js
var ComSpread = function(){};
ComSpread.prototype.ctx = null;
/**
* 创建用户信息数据表格
*/
ComSpread.prototype.createDataGrid = function(){
var that = this;
var toolbar = [{
text: '新增用户',
iconCls: 'icon-add',
handler: function () {
$('#comSpreadData').datagrid('clearSelections');//取消所有选中行
$('#addData-window').window({//打开新增用户界面
href:that.ctx+"/operate.htm?type=add",
title:'添加',
left:'200px',
top:'100px',
closed: true,
modal: false,
cache: false,
minimizable:false,
maximizable:false,
collapsible:false,
shadow: false
}).window('open');
}
},'-',{
text: '编辑用户',
iconCls: 'icon-edit',
handler: function () {
var rows =$('#comSpreadData').datagrid('getSelections');
if(rows.length == 1){
var id = rows[0].id;
$('#comSpreadData').datagrid('clearSelections');//取消所有选中行
$('#updateData-window').window({
href:that.ctx+"/operate.htm?type=edit&id="+id,
title:'编辑',
left:'200px',
top:'100px',
closed: true,
modal: false,
cache: false,
minimizable:false,
maximizable:false,
collapsible:false,
shadow: false
}).window('open');
}else if(rows.length == 0 || rows == null){
$.messager.alert("操作提示", "请选择一条记录!");
}else if(rows.length > 1){
$.messager.alert("操作提示", "只能选择一条记录!");
}
}
},'-', {
text: '删除用户',
iconCls: 'icon-remove',
handler: function () {
var rows =$('#comSpreadData').datagrid('getSelections');
if(rows.length >= 1){
var ids="";
for(var i=0;i<rows.length;i++){
ids = rows[i].id + ","+ ids;
}
var data = {};
$.messager.confirm('删除提示', '你确定永久删除该数据吗?', function(r){
if (r){
$.ajax({
type: "get",
url: that.ctx+"/del.htm?ids="+ids,
data: data,
dataType: "json",
success: function(data){
if(data.code="200"){
//$.messager.alert("操作提示", "删除成功!","info");
$('#comSpreadData').datagrid('clearSelections');
$('#comSpreadData').datagrid('reload');
}else{
$.messager.alert("操作提示", "删除失败!","error");
}
}
});
}
});
}else {
$.messager.alert("提示","请选择要删除的数据")
}
}
},'-',{
text: '刷 新',
iconCls: 'icon-reload',
handler: function () {
$('#comSpreadData').datagrid('reload');
}
},'-',{
text: '公司名称<input type="text" id="search_name" maxlength="10"/>'
}, {
text: '公司编码<input type="text" id="search_code" style="width:240px" maxlength="32"/>'
},{
text: '搜索',
iconCls: 'icon-search',
handler: function(){
var search_name = $("#search_name").val();
var search_code = $("#search_code").val();
$('#comSpreadData').datagrid('clearSelections');//取消所有选中行
$('#comSpreadData').datagrid('load',{"a.name":search_name,"a.code":search_code});
}
},{
text: '清空',
iconCls: 'icon-cut',
handler: function(){
$("#search_name").val("");
$("#search_code").val("");
}
}];
$('#comSpreadData').datagrid({
url :that.ctx+'/comspreaddata.htm',
fit : false,
pagination:true,
rownumbers:true,
striped: true,
pageSize:10,
pageList:[10,15,20,30],
loading:"数据加载中...",
idField:"id",
checkbox:true,
fitColumns:true ,
showFooter: true,
autoRowHeight:false,//定义设置行的高度,根据该行的内容。设置为false可以提高负载性能。
columns : [ [ {
field : 'id',
title : '序号',
hidden: true
}, {
checkbox:true,
field : 'checkbox',
title : 'checkbox'
}, {
field : 'name',
title : '公司名称',
width : 100,
halign: 'center',
align:'center',
}, {
field : 'code',
title : '公司编码',
width:250,
halign: 'center',
align:'center',
}, {
field : 'createTime',
title : '创建时间',
halign: 'center',
width : 130,
align:'center',
}, {
field : 'creater',
title : '创建人',
width : 100,
halign: 'center',
align:'center',
}, {
field : 'updateTime',
title : '更新时间',
halign: 'center',
width : 130,
align:'center',
formatter: function(value){
if(value == undefined || value==''){
return "-";
}else{
return value;
}
}
}, {
field : 'updater',
title : '更新人',
halign: 'center',
width : 100,
align:'center',
formatter: function(value){
if(value == undefined || value==''){
return "-";
}else{
return value;
}
}
}, {
field : 'inuse',
title : '是否启用',
halign: 'center',
width : 100,
align:'center',
formatter: function(value){
if(value == '1'){
return "启用";
}else{
return "禁用";
}
}
} ] ]
,toolbar: toolbar
});
}
弹出层
<%@ page contentType="text/html; charset=UTF-8" language="java"
import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript">
var path = "<%=path%>";
</script>
<div align="center">
<c:if test="${type == 'add'}">
<form action="<%=path%>/addOrUpdate.htm" method="post"
id="addform">
<table>
<tr>
<td>公司名称:</td>
<td><input
type="text" id="addname" name="a.name"
placeholder="请输入公司名称" maxlength="10"></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td align="center"><input
type="button" title="新增" style="height: 25px" value="保存"
onclick='addform();'></td>
<td align="center"><input type="button" value="关闭"
style="height: 25px" onclick="$('#addData-window').window('close')"></td>
</tr>
<span id="warn1" style="color: red"></span>
</table>
<table>
<tr>
<td><span style="color:green">温馨提示:</span></td>
<td><span style="color:red">公司名称不能超过5个汉字</span></td>
</tr>
</table>
</form>
</c:if>
<c:if test="${type == 'edit'}">
<form action="<%=path%>/addOrUpdatecomspread.htm" method="post"
id="updateform">
<input name="browserComSpread.id" id="id" value="${comSpreadRow.id }"
type="hidden">
<table align="center">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>公司名称:</td>
<td><input
type="text" id="updatename" value="${comSpreadRow.name }"
name="a.name" maxlength="10"></td>
</tr>
<tr>
<td>公司编码:</td>
<td>${comSpreadRow.code }</td>
</tr>
<tr>
<td>是否可用:</td>
<td><select
name="a.inuse">
<c:if test="${comSpreadRow.inuse != '0'}">
<option value="1" selected="selected">可用</option>
<option value="0">禁用</option>
</c:if>
<c:if test="${comSpreadRow.inuse == '0'}">
<option value="1">可用</option>
<option value="0" selected="selected">禁用</option>
</c:if>
</select></td>
</tr>
<tr>
<td>创建时间:</td>
<td>${comSpreadRow.createTime }</td>
</tr>
<c:if test="${comSpreadRow.updateTime != 'null'}">
<tr style="tdst-style: none;">
<td>更新时间:</td>
<td>${comSpreadRow.updateTime }</td>
</tr>
</c:if>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td align="center"><input type="button" title="新增" style="height: 25px" value="保存" onclick='updateform();'></td>
<td align="center"><input type="button" value="关闭" style="height: 25px" onclick="$('#updateData-window').window('close')"></td>
</tr>
<span id="warn2" style="color: red"></span>
</table>
</form>
</c:if>
</div>
<script type="text/javascript">
$(document).ready(function (){
//判断是否从注册页面来的跳转
<c:if test="${ empty sessionScope.manage }">
//如果非法链接
window.location.href = "<%=path%>/***/login.shtml";
</c:if>
});
function updateform(){
var id = $("#id").val();
var name = $("#updatename").val();
if(isNull(name)){
$("#warn2").html("请输入公司名称");
}else{
$.ajax({
type: "get",
url: path+"/exitcomspreadname.htm",
data: {"a.name":name,"type":"up","a.id":id},
dataType: "json",
async: false,
error: function() {
flag = false;
},
success: function(data){
if(data.code == "200"){
$("#warn2").html("");
$("#updateform").submit();
}else if(data.code == "500"){
$("#warn2").html("该公司名已被占用");
$("#updatename").focus();
}
}
});
}
}
function addform(){
var name = $("#addname").val();
if(isNull(name)){
$("#warn1").html("请输入公司名称");
}else{
$.ajax({
type: "get",
url: path+"/exitcomspreadname.htm",
data: {"a.name":name,"type":"add"},
dataType: "json",
async: false,
error: function() {
flag = false;
},
success: function(data){
if(data.code == "200"){
$("#warn1").html("");
$("#addform").submit();
}else if(data.code == "500"){
$("#warn1").html("该公司名已被占用");
}
}
});
}
}
function isNull( str ) {
if ( str == "" ) {
return true;
}
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
</script>
*功能按钮分行
数据列表页
<%@ page contentType="text/html; charset=UTF-8" language="java"
import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/Web/common/page/jqueryadmin.jsp"%>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9, IE=8, chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="万家兄弟–投融资服务平台,投资理财 |P2P网贷 |网贷平台 |网络贷款 |P2P投资理财 |深圳P2P平台,万家兄弟_" />
<meta name="description" content="万家兄弟-(www.vanbrother.com) 服务热线: 4008-939-039.【万家兄弟】是一家专业、安全、稳健的P2P投资理财网贷平台,为投资者、融资者提供网络贷款、融资服务;致力于创建中国最具市场效率的中小微企业投融市场。 " />
<title>推广合作用户管理</title>
<link rel="stylesheet" type="text/css"
href="<%=path%>/Web/comspread/css/easyui.css" />
<link rel="stylesheet" type="text/css"
href="<%=path%>/Web/comspread/css/icon.css">
<link rel="stylesheet" type="text/css"
href="<%=path%>/Web/comspread/css/datagrid.css" />
<link rel="stylesheet" type="text/css"
href="<%=path%>/Web/comspread/css/WdatePicker.css" />
<script type="text/javascript"
src="<%=path%>/Web/comspread/js/comspreadlist.js"></script>
<script type="text/javascript"
src="<%=path%>/Web/comspread/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=path%>/Web/common/js/easyui/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"
src="<%=path%>/Web/comspread/js/WdatePicker.js"></script>
</head>
<body>
<table id="comSpreadData" class="easyui-datagrid"></table>
<div id="searchbar">
公司名称:<input type="text" id="search_name" maxlength="10"/>
公司编码:<input type="text" id="search_code" style="width:240px" maxlength="32"/>
创建时间<input type="text" id="search_createtime_start" onfocus="WdatePicker({lang:'zh-cn'})"/>
-<input type="text" id="search_createtime_end" onfocus="WdatePicker({lang:'zh-cn'})"/>
<input type="button" value="搜索" onclick="new ComSpread().searchdata()" />
<input type="button" value="清空" onclick="new ComSpread().cleardata()" />
</div>
<div id="addData-window" style="width:400px;height:230px;font-size: 16" title="添加数据">
</div>
<div id="updateData-window" style="width:400px;height:300px;font-size: 16" title="更新数据">
</div>
<script type="text/javascript">
$(document).ready(function (){
//判断是否从注册页面来的跳转
<c:if test="${ empty sessionScope.manage }">
//如果非法链接
window.location.href = "<%=path%>/system/login.shtml";
</c:if>
<c:if test="${not empty sessionScope.manage}">
$(window).resize(function() {
$('#comSpreadData').datagrid('resize');
});
var comSpread = new ComSpread();
comSpread.ctx = path;
comSpread.createDataGrid();
</c:if>
});
</script>
</body>
</html>
数据加载js
var ComSpread = function(){};
ComSpread.prototype.ctx = null;
ComSpread.prototype.searchdata = function(){
var search_name = $("#search_name").val();
var search_code = $("#search_code").val();
var search_createtime_start = $("#search_createtime_start").val();
var search_createtime_end = $("#search_createtime_end").val();
$('#comSpreadData').datagrid('clearSelections');//取消所有选中行
$('#comSpreadData').datagrid('load',{"browserComSpread.name":search_name,"browserComSpread.code":search_code,"browserComSpread.createTimeStart":search_createtime_start,"browserComSpread.createTimeEnd":search_createtime_end});
}
ComSpread.prototype.cleardata = function(){
$("#search_name").val("");
$("#search_code").val("");
$("#search_createtime_start").val("");
$("#search_createtime_end").val("");
}
/**
* 创建用户信息数据表格
*/
ComSpread.prototype.createDataGrid = function(){
var that = this;
var toolbar = [{
text: '新增用户',
iconCls: 'icon-add',
handler: function () {
$('#comSpreadData').datagrid('clearSelections');//取消所有选中行
$('#addData-window').window({//打开新增用户界面
href:that.ctx+"/operatecomspread.htm?type=add",
title:'添加',
left:'200px',
top:'100px',
closed: true,
modal: false,
cache: false,
minimizable:false,
maximizable:false,
collapsible:false,
shadow: false
}).window('open');
}
},'-',{
text: '编辑用户',
iconCls: 'icon-edit',
handler: function () {
var rows =$('#comSpreadData').datagrid('getSelections');
if(rows.length == 1){
var id = rows[0].id;
$('#comSpreadData').datagrid('clearSelections');//取消所有选中行
$('#updateData-window').window({
href:that.ctx+"/operatecomspread.htm?type=edit&id="+id,
title:'编辑',
left:'200px',
top:'100px',
closed: true,
modal: false,
cache: false,
minimizable:false,
maximizable:false,
collapsible:false,
shadow: false
}).window('open');
}else if(rows.length == 0 || rows == null){
$.messager.alert("操作提示", "请选择一条记录!");
}else if(rows.length > 1){
$.messager.alert("操作提示", "只能选择一条记录!");
}
}
},'-', {
text: '删除用户',
iconCls: 'icon-remove',
handler: function () {
var rows =$('#comSpreadData').datagrid('getSelections');
if(rows.length >= 1){
var ids="";
for(var i=0;i<rows.length;i++){
ids = rows[i].id + ","+ ids;
}
var data = {};
$.messager.confirm('删除提示', '你确定永久删除该数据吗?', function(r){
if (r){
$.ajax({
type: "get",
url: that.ctx+"/delcomspread.htm?ids="+ids,
data: data,
dataType: "json",
success: function(data){
if(data.code="200"){
//$.messager.alert("操作提示", "删除成功!","info");
$('#comSpreadData').datagrid('clearSelections');
$('#comSpreadData').datagrid('reload');
}else{
$.messager.alert("操作提示", "删除失败!","error");
}
}
});
}
});
}else {
$.messager.alert("提示","请选择要删除的数据")
}
}
},'-',{
text: '刷 新',
iconCls: 'icon-reload',
handler: function () {
//$('#comSpreadData').datagrid('reload');//重新加载数据
$("#search_name").val("");
$("#search_code").val("");
$("#search_createtime").val("");
$('#comSpreadData').datagrid('load',{"browserComSpread.name":"","browserComSpread.code":"","browserComSpread.createTime":""});
}
}/*,'-',{
text: '公司名称<input type="text" id="search_name" maxlength="10"/>'
}, {
text: '公司编码<input type="text" id="search_code" style="width:240px" maxlength="32"/>'
}, {
text: '创建时间<input type="text" id="search_createtime" onfocus="WdatePicker({lang:\'zh-cn\'})"/>'
},{
text: '搜索',
iconCls: 'icon-search',
handler: function(){
var search_name = $("#search_name").val();
var search_code = $("#search_code").val();
var search_createtime = $("#search_createtime").val();
$('#comSpreadData').datagrid('clearSelections');//取消所有选中行
$('#comSpreadData').datagrid('load',{"browserComSpread.name":search_name,"browserComSpread.code":search_code,"browserComSpread.createTime":search_createtime});
}
},{
text: '清空',
iconCls: 'icon-cut',
handler: function(){
$("#search_name").val("");
$("#search_code").val("");
$("#search_createtime").val("");
}
}*/];
$('#comSpreadData').datagrid({
url :that.ctx+'/comspreaddata.htm',
fit : false,
pagination:true,
rownumbers:true,
striped: true,
pageSize:10,
pageList:[10,15,20,25],
loading:"数据加载中...",
idField:"id",
checkbox:true,
fitColumns:true ,
showFooter: true,
autoRowHeight:false,//定义设置行的高度,根据该行的内容。设置为false可以提高负载性能。
columns : [ [ {
field : 'id',
title : '序号',
hidden: true
}, {
checkbox:true,
field : 'checkbox',
title : 'checkbox'
}, {
field : 'name',
title : '公司名称',
width : 100,
halign: 'center',
align:'center',
}, {
field : 'code',
title : '公司推广编码',
width:250,
halign: 'center',
align:'center',
}, {
field : 'channelcode',
title : '渠道编码',
width:100,
halign: 'center',
align:'center',
}, {
field : 'channelcodedes',
title : '渠道编码描述',
width:250,
halign: 'center',
align:'center',
formatter: function(value){
if(value == '' || value == undefined){
return "-";
}else{
return value;
}
}
},{
field : 'inuse',
title : '是否启用',
halign: 'center',
width : 100,
align:'center',
formatter: function(value){
if(value == '1'){
return "启用";
}else{
return "禁用";
}
}
},{
field : 'createTime',
title : '创建时间',
halign: 'center',
width : 130,
align:'center',
}, {
field : 'creater',
title : '创建人',
width : 100,
halign: 'center',
align:'center',
}, {
field : 'updateTime',
title : '更新时间',
halign: 'center',
width : 130,
align:'center',
formatter: function(value){
if(value == undefined || value==''){
return "-";
}else{
return value;
}
}
}, {
field : 'updater',
title : '更新人',
halign: 'center',
width : 100,
align:'center',
formatter: function(value){
if(value == undefined || value==''){
return "-";
}else{
return value;
}
}
}] ]
,toolbar : toolbar
});
$('#searchbar').appendTo('.datagrid-toolbar');
}