这个是我在项目里用的jsp页面的easyui的应用。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://emay.cn/jstl/emas" prefix="emas" %>
<html>
<head>
<title>业务类型</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
</style>
<script type="text/javascript">
var datagridId="#tt";
var adddialogueId="#dlg";
var editdialogueId="#updatedlg";
var addFormId="#fm";
var editFormId="#updatefm";
var addTitle="新增频道";
var editTitle="编辑频道";
var deleteConfirmMessage="你确定要删除吗?";
var noSelectedRowMessage="你没有选择行";
var searchFormId="#searchForm";
var pageSize=5;
var listUrl="business/listpage";
var textUrl="${pageContext.request.contextPath}/sms/listpaget";
var updateUrl="channel/update";
var deleteUrl="channel/delete";
var addUrl="channel/create";
var url;
var userurl="${pageContext.request.contextPath}/department/listuser";
var saup;
$(function() {
showbusiness();
});
var url;
function showbusiness(){
$("#tt").datagrid({
/* title: '用户管理', //标题 */
method: 'post',
iconCls: 'icon-edit', //图标
singleSelect: false, //多选
//checkOnSelect:false,
height: 470, //高度
fitColumns: true, //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例。
striped: true, //奇偶行颜色不同
collapsible: true,//可折叠
url:listUrl, //数据来源
sortName: 'id', //排序的列
sortOrder: 'desc', //倒序
pageNumber: 1,//当设置了 pagination 特性时，初始化页码。
pageList : [pageSize,pageSize*2,pageSize*3],
pageSize : pageSize, //当设置了 pagination 特性时，初始化页面尺寸的选择列表。
remoteSort: true, //服务器端排序
idField: 'id', //主键字段
queryParams: {}, //查询条件
pagination: true, //显示分页
rownumbers: true, //显示行号
columns:[[
{field: 'ck', checkbox: true, width: 2}, //显示复选框
{field: 'id', title: '业务ID', width: 20, sortable: true,/* hidden: true, */
formatter: function (value, row, index) {
return row.id;
}
},
{field:'name',title:'业务类型',width:100, sortable: true,
formatter: function (value, row, index) {
return row.name;
}
},
{field:'description',title:'描述',width:100, sortable: true,
formatter: function (value, row, index) {
return row.description;
}
},
{field:'createDate',title:'创建时间',width:100, sortable: true,
formatter: function (value, row, index) {
return row.createDate;
}
},
{field:'modifyDate',title:'修改时间',width:100, sortable: true,
formatter: function (value, row, index) {
return row.modifyDate;
}
}
]],
/* toolbar: [
{
text: '新建',
iconCls: 'icon-add',
handler: function () {
addrow();
}
},
'-',
{
text: '修改',
iconCls: 'icon-edit',
handler: function () {
updaterow();
}
},
'-',
{
text: '删除',
iconCls: 'icon-remove',
handler: function () {
deleterow();
}
},
'-'
], */
onLoadSuccess: function () {
$("#tt").datagrid('clearSelections'); //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
}
});
}
//新建
function addrow() {
$("#addsource").dialog("open").dialog('setTitle', '新建业务');
$("#mytitle").html("新建业务类型");
$("#fm").form("clear");
url = "${pageContext.request.contextPath}/business/addbus";
}
//更新
function updaterow() {
var rows = $('#tt').datagrid('getSelections');
//这里有一个jquery easyui datagrid的一个小bug，必须把主键单独列出来，要不然不能多选
if (rows.length == 0) {
$.messager.alert('提示', "请选择你要更新的业务", 'info');
return;
}
if (rows.length > 1) {
$.messager.alert('提示', "只能选择一个业务进行更新", 'info');
return;
}
$("#fm").form("load", rows[0]);
$("#addsource").dialog("open").dialog('setTitle', '更新业务');
$("#mytitle").html("编辑业务类型");
url = "${pageContext.request.contextPath}/business/updatebus";
}
//删除
function savebus(){
$("#fm").form("submit", {
url: url,
method: 'post',
onSubmit: function () {
return $(this).form("validate");
},
success: function (result) {
if(typeof result === 'object'){
result = result;
}
else{
result = eval("("+result+")")
}
if (result.result == "1") {
$.messager.alert("提示信息", "添加业务成功");
$("#addsource").dialog("close");
$('#tt').datagrid("load");
} else if (result.result == "2") {
$.messager.alert("提示信息", "更新业务成功");
$("#addsource").dialog("close");
$('#tt').datagrid("load");
} else {
$.messager.alert("提示信息", result.mes+"操作失败");
}
}
});
}
function deleterow() {
var rows = $("#tt").datagrid('getSelections');
//这里有一个jquery easyui datagrid的一个小bug，必须把主键单独列出来，要不然不能多选
if (rows.length == 0) {
$.messager.alert('提示', "请选择你要删除的业务", 'info');
return;
}
var ps = "";
$.each(rows, function (i, n) {
if (i == 0)
ps += "?id=" + n.id;
else
ps += "&id=" + n.id;
});
$.post('${pageContext.request.contextPath}/business/todel' + ps, function (data) {
if(data.result=='0'){
$.messager.alert('提示', data.mes, 'info');
}
else{
$.messager.confirm('提示', '确定要删除吗?', function (result) {
if (result) {
var rows = $("#tt").datagrid('getSelections');
var ps = "";
$.each(rows, function (i, n) {
if (i == 0)
ps += "?id=" + n.id;
else
ps += "&id=" + n.id;
});
$.post('${pageContext.request.contextPath}/business/delbus' + ps, function (data) {
$("#tt").datagrid('reload');
$.messager.alert('提示', data.mes, 'info');
});
}
});
}
});
}
</script>
</head>
<body>
<div id="p" class="easyui-panel" title="业务类型">
<!-- 记住这里的url不需要sitemesh装饰 -->
<div title="业务类型 " class="easyui-layout" >
<div id="buslist">
<table id="tt" data-options="border:false,toolbar:'#tb'">
</table>
</div>
</div>
<div id="tb" style="padding:5px;height:auto">
<c:if test="${emas:contains(upList,'36') }">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" οnclick="addrow()">新建</a>
</c:if>
<c:if test="${emas:contains(upList,'36') }">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" οnclick="updaterow()">修改</a>
</c:if>
<c:if test="${emas:contains(upList,'37') }">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" οnclick="deleterow()">删除</a>
</c:if>
</div>
<div id="addsource" class="easyui-dialog" style="width: 400px; height: 300px; padding: 10px 20px;"
closed="true" buttons="#dlg-buttons" data-options="iconCls:'icon-save',resizable:true,modal:true">
<div class="ftitle" id ="mytitle">
新建或修改部门
</div>
<form id="fm" method="post" enctype="multipart/form-data">
<div class="fitem">
<label>
业务类型名称
</label>
<input name="id" type="hidden"/>
<input name="name" class="easyui-validatebox" required="true"/>
<input name="createDate" type="hidden"/>
</div>
<div class="fitem">
<label>
业务类型描述
</label>
<input name="description" class="easyui-validatebox" required="true"/>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="savebus()" iconcls="icon-save">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="javascript:$('#addsource').dialog('close')" iconcls="icon-cancel">取消</a>
</div>
</div>
</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
