1.使用js创建jsp页面
公共common.jsp代码
<%--
公共的引入代码
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
//获到上下文路径
String path = request.getContextPath();
//拼接相应的路径前缀: http://localhost:80/crm2/
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="static/js/easyui/themes/color.css">
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
初始页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%--公共的文件,里面放的是依赖,下面会贴出代码--%>
<%@include file="/WEB-INF/views/common/common.jsp" %>
<%--引入当前这个模块对应的js文件--%>
<script type="text/javascript" src="static/js/model/department.js"></script>
</head>
<body>
<%--数据表格Grid--%>
<table id="departmentGrid"></table>
</body>
</html>
对应的js代码
$(function () {
//js代码创建数据表格,
$("#departmentGrid").datagrid({
//一下是表格的各种属性
fit:true,
fitColumns:true,
singleSelect:true,
columns:[[
{field:'sn',title:'编码',width:100},
{field:'name',title:'名称',width:100},
{field:'dirpath',title:'路径',width:100,align:'right'},
{field:'state',title:'状态',width:100,align:'right'}
]]
});
})
页面效果
准备按钮
<div id="toolbar">
<a href="javascript:;" data-method="add" plain="true" class="easyui-linkbutton c1">添加</a>
<a href="javascript:;" data-method="update" plain="true" class="easyui-linkbutton c2">修改</a>
<a href="javascript:;" data-method="delete" plain="true" class="easyui-linkbutton c3">删除</a>
<a href="javascript:;" data-method="refresh" plain="true" class="easyui-linkbutton c4">刷新</a>
</div>
并将按钮嵌入数据表格中去
完整代码
$("#departmentGrid").datagrid({
fit:true,
fitColumns:true,
singleSelect:true,
url:'department/page',
toolbar:"#toolbar",
pageList:[5,10,20,30,40,100],
pagination:true,
columns:[[
{field:'sn',title:'编码',width:100},
{field:'name',title:'名称',width:100},
{field:'dirpath',title:'路径',width:100,align:'right'},
{field:'state',title:'状态',width:100,align:'right'}
]]
});
页面效果:
为按钮添加事件方法
为按钮添加事件代码:
//wc公共的组件抽取
var departmentGrid = $('#departmentGrid');
var departmentDialog = $('#departmentDialog');
var departmentForm = $('#departmentForm');
//事件注册
$("*[data-method]").on("click",function () {
var methodName = $(this).data("method");
itsource[methodName]();
})
//具体方法
itsource = {
add(){alert("add")},
update(){alert("update")},
save(){alert("save")},
delete(){alert("delete")},
refresh(){alert("refresh")},
close(){alert("close")}
};
通过上面的方面为每一个按钮操作在js中创建好方法,更好的与后台交互
页面效果
上面是拼图
这样我们给按钮就注册好事件了,接下来,我们选择增加,修改,删除,刷新中的某个部分或多个来讲,全部代码后贴在最后
主要讲解增加
添加
添加需要一个弹框
1.jsp页面准备弹框,和相应的按钮
<div id="departmentDialog">
<form id="departmentForm" method="post">
<input type="hidden" name="id">
<table cellpadding="5">
<tr>
<td>编码:</td>
<td><input class="easyui-textbox" type="text" name="sn" data-options="required:true"></input></td>
</tr>
<tr>
<td>名称:</td>
<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
</tr>
<tr>
<td>路径:</td>
<td><input class="easyui-textbox" type="text" name="dirpath" data-options="required:true"></input></td>
</tr>
<tr>
<td>状态:</td>
<td>
<select class="easyui-combobox" name="state" style="width:200px; " data-options="panelHeight:'auto'">
<option value="-1">作废</option>
<option value="0">正常</option>
<option value="1">异常</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<div id="departmentDialogButtons">
<a href="javascript:;" data-method="save" plain="true" class="easyui-linkbutton c5">确定</a>
<a href="javascript:;" data-method="close" plain="true" class="easyui-linkbutton c6">取消</a>
</div>
2.js创建弹窗
//通过js创建咱们的弹出框
departmentDialog.dialog({
title: '编辑数据',
// width: 400,
// height: 200,
closed: true, //默认关闭
modal: true,
buttons:"#departmentDialogButtons"
});
绑定按钮的add方法
//具体方法
itsource = {
add(){
//居中并且打开
departmentDialog.dialog("center").dialog("open");
//保存每次打开，数据都是空的
departmentForm.form("clear");
},
update(){alert("update")},
save(){alert("save")},
delete(){alert("delete")},
refresh(){alert("refresh")},
close(){alert("close")}
};
编译运行,界面
完成弹出框中的确定(save方法),
save(){
//提交表单
departmentForm.form('submit', {
url:"department/save",
onSubmit: function(){
return $(this).form('validate');
},
success:function(data){
//把它转成json
var result = JSON.parse(data);
if(result.success){
itsource.refresh();
itsource.close();
}else{
$.messager.alert('操作失败',result.msg,"error");
}
}
});
},
上面代码分析
后台写过保存方法,将拿到的数据保存到数据库中,再页面刷新的时候展示出来就好了
页面刷新
refresh(){
//刷新一次
departmentGrid.datagrid("reload");
}
增加流程就这样了,后台代码就不写了
下面是完整的jsp页面和js代码
完整的jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%@include file="/WEB-INF/views/common/common.jsp" %>
<%--引入当前这个模块对应的js文件--%>
<script type="text/javascript" src="static/js/model/department.js"></script>
</head>
<body>
<table id="departmentGrid"></table>
<div id="toolbar">
<a href="javascript:;" data-method="add" plain="true" class="easyui-linkbutton c1">添加</a>
<a href="javascript:;" data-method="update" plain="true" class="easyui-linkbutton c2">修改</a>
<a href="javascript:;" data-method="delete" plain="true" class="easyui-linkbutton c3">删除</a>
<a href="javascript:;" data-method="refresh" plain="true" class="easyui-linkbutton c4">刷新</a>
</div>
<div id="departmentDialog">
<form id="departmentForm" method="post">
<input type="hidden" name="id">
<table cellpadding="5">
<tr>
<td>编码:</td>
<td><input class="easyui-textbox" type="text" name="sn" data-options="required:true"></input></td>
</tr>
<tr>
<td>名称:</td>
<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
</tr>
<tr>
<td>路径:</td>
<td><input class="easyui-textbox" type="text" name="dirpath" data-options="required:true"></input></td>
</tr>
<tr>
<td>状态:</td>
<td>
<select class="easyui-combobox" name="state" style="width:200px; " data-options="panelHeight:'auto'">
<option value="-1">作废</option>
<option value="0">正常</option>
<option value="1">异常</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<div id="departmentDialogButtons">
<a href="javascript:;" data-method="save" plain="true" class="easyui-linkbutton c5">确定</a>
<a href="javascript:;" data-method="close" plain="true" class="easyui-linkbutton c6">取消</a>
</div>
</body>
</html>
完整的js代码
$(function () {
//抽取公共组件
var departmentGrid=$('#departmentGrid');
var departmentDialog = $('#departmentDialog');
var departmentForm = $('#departmentForm');
//给每个data-method标签中的属性方法注册并调用方法
$("*[data-method]").on("click",function () {
var methodName=$(this).data("method");
itsource[methodName]();
})
//具体方法
itsource = {
add(){
//居中并且打开
departmentDialog.dialog("center").dialog("open");
//保存每次打开，数据都是空的
departmentForm.form("clear");
},
update(){
//判断是否选中一行
var row = departmentGrid.datagrid("getSelected");
if(!row){
$.messager.alert('提示',"请选中后再进行操作!","info");
return ;
}
//居中并且打开
departmentDialog.dialog("center").dialog("open");
//保存每次打开，数据都是空的
departmentForm.form("clear");
//进行回显
departmentForm.form("load",row);
},
save(){
//提交表单
departmentForm.form('submit', {
url:"department/save",
onSubmit: function(){
return $(this).form('validate');
},
success:function(data){
//把它转成json
var result = JSON.parse(data);
if(result.success){
itsource.refresh();
itsource.close();
}else{
$.messager.alert('操作失败',result.msg,"error");
}
}
});
},
delete(){
//选中一行才可以删除
var row = departmentGrid.datagrid("getSelected");
if(!row){
$.messager.alert('提示',"请选中后再进行操作!","info");
return ;
}
//问:是否真的要删除？
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
$.get("department/delete",{id:row.id},function (result) {
if(result.success){
itsource.refresh();
}else{
$.messager.alert('操作失败',result.msg,"error");
}
})
}
});
},
refresh(){
//刷新一次
departmentGrid.datagrid("reload");
},
close(){
departmentDialog.dialog("close");
}
};
//js创建数据表格
departmentGrid.datagrid({
fit:true,
fitColumns:true,
singleSelect:true,
url:'department/page',
toolbar:"#toolbar",
pageList:[5,10,20,30,40,100],
pagination:true,
columns:[[
{field:'sn',title:'编码',width:100},
{field:'name',title:'名称',width:100},
{field:'dirpath',title:'路径',width:100,align:'right'},
{field:'state',title:'状态',width:100,align:'right'}
]]
});
//通过js创建咱们的弹出框
departmentDialog.dialog({
title: '编辑数据',
// width: 400,
// height: 200,
closed: true, //默认关闭
modal: true,
buttons:"#departmentDialogButtons"
});
})
完整的页面
小结:一个前台的jsp,js代码就是这些了,用js创建数据表格,弹出框,建议使用,因为会使你对js代码更加熟练,对一个表格,弹出框的属性更加熟练,以及整个代码的流程都有很大的帮助,希望这篇文章对你有所帮助
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
