jquery easyui使用(四)······添加,编辑,删除
2016-08-18 17:15
316 查看
前端:
添加js引用
jquery控制前端显示并利用ajax与服务器交互
<div style="font-size: 25px; font-weight: 700; margin: 50px 0 10px 10px;"> 车辆登记 </div> <!--添加按钮--> <div id='myToolbar'> <a class='easyui-linkbutton' iconcls='icon-add' href='javascript:void(0)' onclick='Insert()' style="margin: 5px 5px 5px 5px;">添加</a> <a class='easyui-linkbutton' iconcls='icon-edit' href='javascript:void(0)' onclick='Edit()' style="margin: 5px 5px 5px 5px;">编辑</a> <a class='easyui-linkbutton' iconcls='icon-cancel' href='javascript:void(0)' onclick='Delete()' style="margin: 5px 5px 5px 5px;">删除</a> </div> <!--数据表格--> <table id="table_Data" class="easyui-datagrid" title="" data-options="singleSelect:true,collapsible:true,url:'ashx/Car.ashx',method:'post',queryParams: { 'action': 'carlist' },toolbar: '#myToolbar',height: '500px',width: 'auto',iconCls: 'icon-edit',fitColumns: false,pagination: true,pageSize: 15,pageList: [15, 25, 35, 45],pageNumber: 1,rownumbers: true,loadMsg: '正在加载数据...',"> <thead> <tr> <th data-options="field:'ID',width:80, hidden: false">ID</th> <th data-options="field:'Name',width:100,align:'center'">Name</th> <th data-options="field:'Type',width:80,align:'center'">Type</th> <th data-options="field:'LicenseTag',width:80,align:'center'">LicenseTag</th> <th data-options="field:'Color',width:50,align:'center'">Color</th> <th data-options="field:'Seats',width:60,align:'center'">Seats</th> <th data-options="field:'Remarks',width:250,align:'center'">Remarks</th> </tr> </thead> </table> <!--添加对话框--> <div id="div_Add" style="" class="easyui-dialog" data-options="iconCls:'icon-add',modal:true,closed:true,buttons:'#div_OkCancel'"> <div style="margin: 30px 0 0 0; overflow: hidden;"> <div style="width: 40%; text-align: right; float: left;">车辆名称:</div> <div style="width: 60%; text-align: left; float: left;"> <input id="txtCarName" class="easyui-validatebox" data-options="required:true,missingMessage:'车辆名称不能为空!'" /> </div> </div> <div style="margin: 10px 0 0 0; overflow: hidden;"> <div style="width: 40%; text-align: right; float: left;">型号:</div> <div style="width: 60%; text-align: left; float: left;"> <input id="txtType" type="text" /> </div> </div> <div style="margin: 10px 0 0 0; overflow: hidden;"> <div style="width: 40%; text-align: right; float: left;">牌照:</div> <div style="width: 60%; text-align: left; float: left;"> <input id="txtLicenseTag" type="text" /> </div> </div> <div style="margin: 10px 0 0 0; overflow: hidden;"> <div style="width: 40%; text-align: right; float: left;">颜色:</div> <div style="width: 60%; text-align: left; float: left;"> <input id="txtColor" type="text" /> </div> </div> <div style="margin: 10px 0 0 0; overflow: hidden;"> <div style="width: 40%; text-align: right; float: left;">座位数:</div> <div style="width: 60%; text-align: left; float: left;"> <input id="txtSeats" class="easyui-numberbox" data-options="min:1,max:100,precision:0,required:true,missingMessage:'座位数不能为空!'" /> </div> </div> <div style="margin: 10px 0 30px 0; overflow: hidden;"> <div style="width: 40%; text-align: right; float: left;">备注:</div> <div style="width: 60%; text-align: left; float: left;"> <textarea id="txtRemarks"></textarea> </div> </div> </div> <div id="div_OkCancel"> <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick='Submit()'>确定</a> <a href='javascript:void(0);' class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick='$("#div_Add").dialog("close", false);'>取消</a> </div> <input type="hidden" id="hfID" />
添加js引用
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="../JQuery/easyui/themes/icon.css" rel="stylesheet" /> <link href="../JQuery/easyui/themes/default/easyui.css" rel="stylesheet" /> <script src="../JQuery/jquery.min.js"></script> <script src="../JQuery/easyui/jquery.easyui.min.js"></script> <script src="../JQuery/easyui/locale/easyui-lang-zh_CN.js"></script> </head>
jquery控制前端显示并利用ajax与服务器交互
var roolurl = "http://" + window.location.host; var urlAshx = roolurl + "/CarManager/ashx/Car.ashx"; $(document).ready(function () { // $("#table_Data").datagrid({ // toolbar: '#myToolbar', // url: urlAshx, // queryParams: { "action": "carlist" }, // method: 'post', // width: 'auto', // height: '500px', // iconCls: 'icon-edit', // singleSelect: true, // fitColumns: false, // pagination: true, // pageSize: 15, // pageList: [15, 25, 35, 45], // pageNumber: 1, // rownumbers: true, // loadMsg: "正在加载数据...", // columns: [[ // { filed: 'ID', title: '编号', width: 120, hidden: true }, // { filed: 'Name', title: '车辆名称', width: 120, align: 'center' }, // { filed: 'Type', title: '型号', width: 120, align: 'center' }, // { filed: 'LicenseTag', title: '牌号', width: 120, align: 'center' }, // { filed: 'Color', title: '座位数', width: 120, align: 'center' }, // { filed: 'Seats', title: '颜色', width: 120, align: 'center' }, // { filed: 'Remarks', title: '备注', width: 920, align: 'center' }, // { // filed: 'Action', title: '操作', width: 550, align: 'center', formatter: function (value, row, index) { // alert(row.Name); // var Action = "<a href='javascript:void(0);' onclick='Edit(" + row.ID + ")'>修改</a>\ //| <a href='javascript:void(0);' onclick='Delete(" + row.ID + ")'>删除</a>"; // return Action; // } // } // ]], // onLoadSuccess: function (data) { alert("success"); }, // onLoadError: function (XMLHttpRequest, textStatus, errorThrown) { alert("error"); }, // onBeforeEdit: function (index, row) { }, // onAfterEdit: function (index, row) { }, // onCancelEdit: function (index, row) { } // }); }); //添加按钮 function Insert() { //alert(roolurl + "/CarManager/CarEdit.aspx?type=add"); //window.parent.OpenWindow("登记车辆", roolurl + "/CarManager/CarEdit.aspx?type=add", "500", "300", "icon-add"); //清空 $("#hfID").attr("value", ""); $("#txtCarName").val(""); $("#txtType").val(""); $("#txtLicenseTag").val(""); $("#txtColor").val(""); $('#txtSeats').numberbox('setValue', null); $("#txtRemarks").val(""); //弹出窗口 $("#div_Add").dialog({ title: "车辆登记", width: 500, height: 370, closed: false, //buttons: '#div_OkCancel', modal: true //定义窗口是不是模态(modal)窗口。 }); } //编辑按钮 function Edit() { var row = $("#table_Data").datagrid('getSelected'); if (row != null) { //初始化值 $("#hfID").attr("value", row.ID); $("#txtCarName").val(row.Name); $("#txtType").val(row.Type); $("#txtLicenseTag").val(row.LicenseTag); $("#txtColor").val(row.Color); $('#txtSeats').numberbox('setValue', row.Seats); $("#txtRemarks").val(row.Remarks); //弹出窗口 $("#div_Add").dialog({ title: "车辆信息编辑", width: 500, height: 370, closed: false, //buttons: '#div_OkCancel', modal: true //定义窗口是不是模态(modal)窗口。 }); //$.messager.alert("提示", $('#txtSeats').numberbox('getValue')); } else { $.messager.alert("提示", "请先选中要编辑的行!"); } } //删除按钮 function Delete() { var row = $("#table_Data").datagrid('getSelected'); if (row == null) { $.messager.alert("提示", "请先选中要删除的行!"); return false; } $.messager.confirm("提示", "确定要删除么?", function (r) { if (r) { $.ajax({ //提交数据的类型 POST GET type: "POST", //提交的网址 url: urlAshx, //提交的数据 data: { action: "deletecar", id: row.ID }, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend: function () { }, //成功返回之后调用的函数 success: function (data) { var data = JSON.parse(data); if (data.msg == "1") { $("#div_Add").dialog('close', false);//关闭窗口 $("#table_Data").datagrid('reload');//刷新页面 } $.messager.alert("提示", data.msgbox); }, //调用执行后调用的函数 complete: function (XMLHttpRequest, textStatus) { }, //调用出错执行的函数 error: function () { //请求出错处理 } }); } }); } //提交 function Submit() { var carname = $.trim($("#txtCarName").val()); var seats = $.trim($("#txtSeats").numberbox('getValue')); if (carname == "" || seats == "") { $.messager.alert("提示", "车辆名称和座位数不能为空"); return false; } var id = $.trim($("#hfID").attr("value")); if (id != "") {//编辑 EditCar(id); } else {//登记 AddCar(); } } //登记车辆 function AddCar() { $.ajax({ //提交数据的类型 POST GET type: "POST", //提交的网址 url: urlAshx, //提交的数据 data: { action: "addcar", carname: $("#txtCarName").val(), type: $("#txtType").val(), licensetag: $("#txtLicenseTag").val(), color: $("#txtColor").val(), seats: $("#txtSeats").numberbox('getValue'), remarks: $("#txtRemarks").val() }, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend: function () { }, //成功返回之后调用的函数 success: function (data) { var data = JSON.parse(data); if (data.msg == "1") { $("#div_Add").dialog('close', false);//关闭窗口 $("#table_Data").datagrid('reload');//刷新页面 } $.messager.alert("提示", data.msgbox); }, //调用执行后调用的函数 complete: function (XMLHttpRequest, textStatus) { }, //调用出错执行的函数 error: function () { //请求出错处理 } }); } //编辑车辆 function EditCar(_id) { $.ajax({ //提交数据的类型 POST GET type: "POST", //提交的网址 url: urlAshx, //提交的数据 data: { action: "editcar", id: _id, carname: $("#txtCarName").val(), type: $("#txtType").val(), licensetag: $("#txtLicenseTag").val(), color: $("#txtColor").val(), seats: $("#txtSeats").numberbox('getValue'), remarks: $("#txtRemarks").val() }, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend: function () { }, //成功返回之后调用的函数 success: function (data) { var data = JSON.parse(data); if (data.msg == "1") { $("#div_Add").dialog('close', false);//关闭窗口 $("#table_Data").datagrid('reload');//刷新页面 } $.messager.alert("提示", data.msgbox); }, //调用执行后调用的函数 complete: function (XMLHttpRequest, textStatus) { }, //调用出错执行的函数 error: function () { //请求出错处理 } }); }
相关文章推荐
- Jquery滚掉条插件nanoScrollerJS
- Jquery.min.js 下载
- 【转】jQuery.dataTables 自定义排序
- JQuery强化教程 —— jQuery Easing
- 从零开始,DIY一个jQuery(1)
- 网页标签功能插: jQuery tags input 翻译api
- jQuery实现对file对象的压缩
- jQuery AutoComplete在AJAX UpdatePanel环境中PostBack之后无法工作
- JQuery强化教程 —— jQuery Easing
- jQuery中json对象与json字符串互换 (2
- jQuery 增加 删除 修改select option
- jquery 拓展
- jquery 事件绑定on bind delegate区别
- JQuery强化教程 —— jQuery Easing
- JQuery强化教程 —— jQuery Easing
- jQuery源码分析系列
- JQuery强化教程 —— jQuery Easing
- jQuery扩展函数方法
- javaScript发展史(jQuery库版本)
- JS & JQuery 动态添加 select option