php增删改查前后端分离,前后端分离之前端增删改查
初次接觸前后端分離，現(xiàn)把前端一個(gè)例子放出來(lái)記錄以下，不喜勿噴。
html靜態(tài)頁(yè)面代碼：
菜單管理平臺(tái)數(shù)據(jù)...
菜單管理查詢(xún)條件列表
菜單名稱(chēng)：
菜單父級(jí)：
菜單名稱(chēng)：
菜單級(jí)別：
菜單父級(jí)：
圖片地址：
鏈接地址：
校驗(yàn)位 ??：
菜單大圖片 ??：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,// 默認(rèn)每頁(yè)多少行
pageList : [ 10, 20, 30, 40, 50 ],// 可以選擇每頁(yè)多少行
pageSize : 15,// 默認(rèn)每頁(yè)多少行
pageList : [ 15, 20, 30, 40, 50 ],// 可以選擇每頁(yè)多少行
collapsible : true,
nowrap : false,
striped : true,
queryParams : {
"menuName" : $("#menuName").val(),
"parentname" : $("#parentname").val()
},
collapsible : true,
loadMsg : '數(shù)據(jù)裝載中......',// 等待頁(yè)面的時(shí)候，顯示的內(nèi)容
frozenColumns : [ [ {
field : 'ck',
checkbox : true
} ] ],
columns : [ [ {
field : 'menuName',
title : '菜單名稱(chēng)',
width : 30,
align : 'center'
}, {
field : 'levelname',
title : '菜單級(jí)別',
width : 30,
align : 'center'
}, {
field : 'parentname',
title : '菜單父級(jí)',
width : 30,
align : 'center'
}, {
field : 'menuAddress',
title : '菜單圖片地址',
width : 30,
align : 'center'
}, {
field : 'linkAddress',
title : '鏈接地址',
width : 30,
align : 'center'
} ] ],
pagination : true,// 啟動(dòng)分頁(yè)效果
rownumbers : true, // 顯示行數(shù)
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("服務(wù)器異常！");
}
});
} else {
$.messager.show({
title : 'Error',
msg : '請(qǐng)?zhí)顚?xiě)信息！'
});
}
}
// 刪除
function removeUser() {
var urlg2 = $.cookie('urlg');
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('確認(rèn)', '確定刪除該條數(shù)據(jù)?', 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
// message
title : 'success',
msg : result.msg
});
} else {
$.messager.show({ // show error
// message
title : 'Error',
msg : result.msg
});
}
}, 'json');
}
});
}
}
以上是項(xiàng)目中一個(gè)菜單的CRUD前端代碼
總結(jié)
以上是生活随笔為你收集整理的php增删改查前后端分离,前后端分离之前端增删改查的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 新出的服装，奥比的8选1要选哪套？
- 下一篇： “日长昼加餐”下一句是什么