前后端分离之前端增删改查

来源：互联网发布：windows桌面编辑：程序博客网时间：2024/06/06 00:47

初次接触前后端分离，现把前端一个例子放出来记录以下，不喜勿喷。

html静态页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/nav.css" rel="stylesheet" type="text/css" /><link href="css/neweasyui.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css"href="js/js_util/easyui-1.5/themes/default/easyui.css"><link rel="stylesheet" type="text/css"href="js/js_util/easyui-1.5/themes/icon.css"><link rel="stylesheet" type="text/css"href="js/js_util/easyui-1.5/demo/demo.css"><script language="JavaScript" src="js/js_util/jquery.min.js"></script><script type="text/javascript"src="js/js_util/easyui-1.5/jquery.easyui.min.js"></script><script language="JavaScript" src="js/js_util/jquery.cookie.js"></script><script language="JavaScript" src="js/js_core/menu.js"></script><script language="JavaScript" src="js/js_core/cookieIsNo.js"></script><script type="text/javascript" src="js/js_util/jqPaginator.js"></script><script type="text/javascript">$(function() {//顶部导航切换$(".nav li a").click(function() {$(".nav li a.selected").removeClass("selected")$(this).addClass("selected");})})</script><script type="text/javascript">if (top != self) {if (top.location != self.location) {top.location = self.location;}}</script><style>.box {background-color: lavender;float: left;position: fixed;left: 35%;top: 10%;width: 30%;padding: 0px;height: 400px;border: 1px #37a5e5 solid;border-radius: 2px;;display: none; /* 默认对话框隐藏 */z-index: 100;}.box.show {display: block;}.box .x {font-size: 14px;text-align: right;display: block;color: #ea2020;}.box input {width: 50%;font-size: 14px;margin-top: 18px;}.box p input {border: 1px solid #d0dee5;font: '微软雅黑', '宋体';}.tianjiayh .currentttt {cursor: pointer;background-color: #5da8c5;}</style></head><body style="background:#e0ecfb; margin: auto;"><div style="position:fixed;height:100%;width:100%;"><div class="navtop"><img src="images/nav/images/navtopimg.png"style="width:100%;height:100%;" /></div><div class="aaaaa"style="width:100%;height:20%;margin-top:-10%;float: left;"><!--新建Div写显示文字--><p class="xinwei"><img class="xinweitu" src="images/nav/images/topp.png" /><!--本页logo图片路径自己改--><i class="font">菜单管理平台数据...</i><!--大标题--><i class="fontmin">菜单管理查询条件列表</i><!--小标题--></p><a href="javascript:history.go(-1)"><input class="anniunavbg11"type="button" value="返回" onclick="location.href=document.referrer;" /></a></div><div class="chaxuanyh"><ul><form id="selectMenuDemo"><li>菜单名称：<input type="text" id="menuName"style="border:1px solid #bfcfe1;height: 25px;width: 198px;" /></li><li>菜单父级：<input type="text" id="parentname"style="border:1px solid #bfcfe1;height: 25px;width: 198px;" /></li><li><input class="input" value="查询" type="button"onclick="inittable()"style="width: 60px;height: 25px;text-align: center;color: #fff;background-image: url('images/nav/images/anniu3.png');background-color: transparent;" /></li></form></ul></div><hrstyle="height: 2px;background: #1c7bae;width: 100%;margin-bottom:2px;" /><!-- 表格b --><table id="dg" title="My Users" class="easyui-datagrid"style="width:100%;height:63%;"></table><!-- 工具栏g --><div id="toolbar"><a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"onclick="newUser()">添加</a> <a href="#" class="easyui-linkbutton"iconCls="icon-edit" plain="true" onclick="editUser()">修改</a> <ahref="#" class="easyui-linkbutton" iconCls="icon-remove"plain="true" onclick="removeUser()">删除</a></div><!-- 弹出框-添加修改c --><div id="dlg" class="easyui-dialog"style="width:420px;height:350px;padding:10px 20px" closed="true"buttons="#dlg-buttons"><form method="post"style="text-align: center;margin: auto;margin-top:6%;font-size: 12px;"id="fm"><p style="text-align: center;margin: auto;margin-top:1%;">菜单名称：<input name="menuName" class="newinput-style easyui-validatebox"required="true" type="text" style="height: 25px;"value=""></p><p style="text-align: center;margin-top:1%;font-size: 12px;">菜单级别：<input id="cc1" class="newinput-style" required="true"style="width:148px;height: 25px;" class="easyui-combobox"name="menuLevel"></input></p><p style="text-align: center;margin: auto;margin-top:1%;">菜单父级：<input id="cc2" name="menuParent" class="newinput-style" type="text"style="height: 25px;" value=""></p><p style="text-align: center;margin-top:1%;">图片地址：<input name="menuAddress" class="newinput-style" type="text"style="height: 25px;"</p><p style="text-align: center;margin-top:1%;">链接地址：<input name="linkAddress" class="newinput-style" type="text"style="height: 25px;" value=""></p><p style="text-align: center;margin-top:1%;">校验位   ：<input name="checkBit" class="newinput-style"type="text" style="height: 25px;" value=""></p><p style="text-align: center;margin-top:1%;">菜单大图片   ：<input name="field1" class="newinput-style"type="text" style="height: 25px;" value=""></p></form></div><!-- 弹出框按钮 --><div id="dlg-buttons" style="text-align:center;"><a href="#" class="easyui-linkbutton" iconCls="icon-ok"onclick="saveUser()">保存</a> <a href="#" class="easyui-linkbutton"iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a></div><IFRAME id="iframe2" style="float: left;position: fixed;bottom: 0px;"NAME="content_frame" width=100% height=8% scrolling="no"frameborder="0" SRC="bnav.html"></IFRAME></div></body></html>

js代码：

$(function() {inittable();});// 初始化表格function inittable() {var urlg2 = $.cookie('urlg');$('#dg').datagrid({url : urlg2 + "/tbmenu/selectMenuForPage",title : '信息列表',// 文字提示toolbar : '#toolbar',iconCls : 'icon-ok',fitColumns : true,pageSize : 20,// 默认每页多少行pageList : [ 10, 20, 30, 40, 50 ],// 可以选择每页多少行pageSize : 15,// 默认每页多少行pageList : [ 15, 20, 30, 40, 50 ],// 可以选择每页多少行collapsible : true,nowrap : false,striped : true,queryParams : {"menuName" : $("#menuName").val(),"parentname" : $("#parentname").val()},collapsible : true,loadMsg : '数据装载中......',// 等待页面的时候，显示的内容frozenColumns : [ [ {field : 'ck',checkbox : true} ] ],columns : [ [ {field : 'menuName',title : '菜单名称',width : 30,align : 'center'}, {field : 'levelname',title : '菜单级别',width : 30,align : 'center'}, {field : 'parentname',title : '菜单父级',width : 30,align : 'center'}, {field : 'menuAddress',title : '菜单图片地址',width : 30,align : 'center'}, {field : 'linkAddress',title : '链接地址',width : 30,align : 'center'} ] ],pagination : true,// 启动分页效果rownumbers : true, // 显示行数singleSelect : true,// 只选择一行xhrFields : {withCredentials : true}});}var url;// 弹出新增窗口function newUser() {var urlg2 = $.cookie('urlg');$('#dlg').dialog('open').dialog('setTitle', '新增菜单管理');$('#fm').form('clear');$('#cc1').combobox({url : urlg2 + '/tbdictionary/selectDicBytype1?dicType=5',valueField : "dicValue",textField : "dicName",dataType : "json",onLoadSuccess : function(data) {$('#cc1').combobox('setValue', data[0].dicValue);},onChange : function(n, o) {$('#cc2').combobox({url : urlg2+ '/tbmenu/selectAllMenu?menuLevel='+ $('#cc1').combobox('getValue'),valueField : "menuCode",textField : "menuName",dataType : "json"// 是否多选});}});url = urlg2 + "/tbmenu/addMenu";}// 弹出修改窗口function editUser() {var urlg2 = $.cookie('urlg');$('#fm').form("clear");$('#cc1').combobox({url : urlg2 + '/tbdictionary/selectDicBytype1?dicType=5',valueField : "dicValue",textField : "dicName",dataType : "json",onLoadSuccess : function(data) {},onChange : function(n, o) {$('#cc2').combobox({url : urlg2+ '/tbmenu/selectAllMenu?menuLevel='+ $('#cc1').combobox('getValue'),valueField : "menuCode",textField : "menuName",dataType : "json"// 是否多选});}});var row = $('#dg').datagrid('getSelected');if (row) {$('#dlg').dialog('open').dialog('setTitle', '修改菜单管理');$('#fm').form('load', row);url = urlg2 + "/tbmenu/updateMenu?menuCode=" + row.menuCode;}}// 新增或修改方法function saveUser() {if ($("#fm").form('validate')) {$.ajax({url : url,type : "POST",dataType : "json",data : $("#fm").serialize(),async : false,success : function(data) {if (data.success == true) {$('#dlg').dialog('close'); // close the dialog$('#dg').datagrid('reload'); // reload the user// data$.messager.show({title : 'success',msg : data.msg});} else {$.messager.show({title : 'Error',msg : data.msg});}},error : function(e) {alert("服务器异常！");}});} else {$.messager.show({title : 'Error',msg : '请填写信息！'});}}// 删除function removeUser() {var urlg2 = $.cookie('urlg');var row = $('#dg').datagrid('getSelected');if (row) {$.messager.confirm('确认', '确定删除该条数据?', function(r) {if (r) {$.post(urlg2 + "/tbmenu/deleteMenu", {menuCode : row.menuCode}, function(result) {if (result.success) {$('#dg').datagrid('reload'); // reload// the// user data$.messager.show({ // show error// messagetitle : 'success',msg : result.msg});} else {$.messager.show({ // show error// messagetitle : 'Error',msg : result.msg});}}, 'json');}});}}

以上是项目中一个菜单的CRUD前端代码

1 0