<script type="text/javascript">//模拟过时页面失效需要重新登录if(top!=window){
window.location.href="/login";}//使用jquery的方式添加事件
$(function (){
$("#botton").on("click", function (){
$("#loginid").form("clear");})})//注意这个是普通事件，上面和下面两个按钮的区别 普通事件和easyui的事件不能混合用
function submitForm(){
var isValid = $("#loginid").form('validate');
console.debug(isValid)if(!isValid){
$.messager.alert('提示',"没有填写账号或者密码",'info');//返回值为false阻止提交return;}else{
$('#loginid').form('submit',{
url:"/login",
onSubmit: function (){// do some check// return false to prevent submit;},
success: function (data){
var result = JSON.parse(data);if(result.success){//加载主页面(注意这个地方是***href*** 注意注意)
window.location.href ="/main";}else{
$.messager.alert('提示', result.msg);}}});}}//监听键盘
$(document.documentElement).on("keyup",function(event){//console.debug(event.keyCode);
var keyCode = event.keyCode;
console.debug(keyCode);if(keyCode ===13){// 捕获回车通常我们采用keyCode 值进行判断submitForm();// 提交表单}});</script><BODY><div id="login"><h1>Login</h1><form id="loginid" method="post" action="/login"class="easyui-form"><input type="text" required="required" placeholder="用户名" name="username"></input><input type="password" required="required" placeholder="密码" name="password"></input><a id="bottdeng"class="but"class="easyui-linkbutton" onclick="submitForm();">登录</a><a id="botton"class="but"class="easyui-linkbutton">重置</a></form></div>
3.角色管理(页面功能)
3.1准备角色数据显示（role.jsp）
3.1.1.role.js
```c
//遍历权限
function permiFormatter(v){//遍历
var name="";for(var p of v){
name+=p.name+" ";}return name;}
$(function (){//常用的元素在这里先获取
var datagrid =$("#datagrid");
var searchform = $("#searchform");
var editDialog = $("#editDialog");
var roleForm=$("#roleForm");
$("*[data-method]").on("click",function (){
var methodName=$(this).data("method");//调用方法
itsource[methodName]();});
itsource={add(){//弹出用户管理编辑框,并且第一次都是居中
editDialog.dialog("open").dialog("center");
roleForm.form("clear");
$('#someDatagrid').datagrid("loadData",[])},update(){//数据的回显//获得选中的行信息
var row=datagrid.datagrid('getSelected')//判断改行是否存在，不存在给出提示信息if(!row){
$.messager.alert('提示','请先选中一行','warning');//结束后面的方法return;}//弹出用户管理编辑框,并且第一次都是居中
editDialog.dialog("open").dialog("center");//显示数据（这里只能显现form中的值）
roleForm.form('load',row);//回显detagrid'中的值（）//注意：：这里表示复制一个数组
var prms=[...row.permissions]
$('#someDatagrid').datagrid("loadData",prms);},remove(){//获得选中的行信息
var row=datagrid.datagrid('getSelected')//判断改行是否存在，不存在给出提示信息if(!row){
$.messager.alert('提示','请先选中一行','warning');//结束后面的方法，后面的代码不再执行return;}//判断是否要删除
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){if(r){//发送ajax请求到后台进行删除操作//第一个参数：为请求地址 第二个参数：传递的参数值 第三个参数：回调函数的返回值
$.get("/role/delete",{id:row.id},function (result){if(result.success){//删除成功需要刷新页面，不重新跳转到第一页
datagrid.datagrid('reload')}else{//删除失败，返回一条错误信息
$.messager.alert('失败',`删除失败,原因：${result.msg}`,'error');}});}});},search(){//拿到查询条件（只有导入拓展js文件才可以使用，目的将内容转化为json格式）
var parm= searchform.serializeObject();//查询值
datagrid.datagrid('load',parm)},//添加框的关闭按钮close(){
editDialog.dialog("close");},//添加框的保存按钮save(){//得到表单的数据,或者通过给改行添加id，通过id去拿值
var row=roleForm.val();if(row.id){//当表单里面有id值的时候，执行修改,
url="/role/update?_cmd=update";}else{
url="/role/save";}//提交表单
var isValid = roleForm.form('validate');if(!isValid){//返回值为false阻止提交return;}else{
roleForm.form('submit',{
url: url,//提交一些额外的数据
onSubmit: function (param){//拿到当前用户的所有权限
var rows = $('#someDatagrid').datagrid("getRows");for(var i=0;i<rows.length;i++){// // param.permissions is undefined
var p=rows[i];//另外一种方式： param["permissions["+i+"].id"] =p.id;
param[`permissions[${i}].id`]=p.id
}},
success: function (data){
var result = JSON.parse(data);if(result.success){//保存成功需要刷新页面，不重新跳转到第一页
datagrid.datagrid('reload')}else{//保存失败，返回一条错误信息
$.messager.alert('保存', `保存,原因：${result.msg}`,'error');}}});//关闭添加框
itsource.close();//重新刷新页面数据}},reload(){//首先清除表单里面的搜索内容
searchform.form("clear");},addDatagrid(index,row){//1.拿到当前角色的所有行数据
var rows = $('#someDatagrid').datagrid("getRows");//遍历当前行for(var r of rows){if(r.id==row.id){
$.messager.alert('提示','当前行已经存在','info');return;}}//把相应的数据追加进去
$('#someDatagrid').datagrid("appendRow",row);},//方法：删除一行数据，根据索引值removeDatagrid(index,row){
$('#someDatagrid').datagrid("deleteRow",index)}}//调用方法，此时的方法后面不需要加（）
$('#allDatagrid').datagrid({
onDblClickRow:itsource.addDatagrid
});//左边列表进行删除数据，双击删除
$('#someDatagrid').datagrid({
onDblClickRow:itsource.removeDatagrid
});});
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
