前端：
<div > 车辆登记</div><!--添加按钮--><div id='myToolbar'> <a class='easyui-linkbutton' iconcls='icon-add' href='javascript:void(0)' onclick='Insert()' >添加</a> <a class='easyui-linkbutton' iconcls='icon-edit' href='javascript:void(0)' onclick='Edit()' >编辑</a> <a class='easyui-linkbutton' iconcls='icon-cancel' href='javascript:void(0)' onclick='Delete()' >删除</a></div><!--数据表格--><table id="table_Data" 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" data-options="iconCls:'icon-add',modal:true,closed:true,buttons:'#div_OkCancel'"> <div > <div >车辆名称：</div> <div > <input id="txtCarName" data-options="required:true,missingMessage:'车辆名称不能为空！'" /> </div> </div> <div > <div >型号：</div> <div > <input id="txtType" type="text" /> </div> </div> <div > <div >牌照：</div> <div > <input id="txtLicenseTag" type="text" /> </div> </div> <div > <div >颜色：</div> <div > <input id="txtColor" type="text" /> </div> </div> <div > <div >座位数：</div> <div > <input id="txtSeats" data-options="min:1,max:100,precision:0,required:true,missingMessage:'座位数不能为空！'" /> </div> </div> <div > <div >备注：</div> <div > <textarea id="txtRemarks"></textarea> </div> </div></div><div id="div_OkCancel"> <a href="javascript:void(0);" data-options="iconCls:'icon-save'" onclick='Submit()'>确定</a> <a href='javascript:void(0);' 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='/images/loading.gif' data-original="../JQuery/jquery.min.js"></script> <script src='/images/loading.gif' data-original="../JQuery/easyui/jquery.easyui.min.js"></script> <script src='/images/loading.gif' data-original="../JQuery/easyui/locale/easyui-lang-zh_CN.js"></script></head>
jquery控制前端显示并利用ajax与服务器交互
1 var roolurl = "http://" + window.location.host; 2 var urlAshx = roolurl + "/CarManager/ashx/Car.ashx"; 3 $(document).ready(function () { 4 // $("#table_Data").datagrid({ 5 // toolbar: '#myToolbar', 6 // url: urlAshx, 7 // queryParams: { "action": "carlist" }, 8 // method: 'post', 9 // width: 'auto', 10 // height: '500px', 11 // iconCls: 'icon-edit', 12 // singleSelect: true, 13 // fitColumns: false, 14 // pagination: true, 15 // pageSize: 15, 16 // pageList: [15, 25, 35, 45], 17 // pageNumber: 1, 18 // rownumbers: true, 19 // loadMsg: "正在加载数据...", 20 // columns: [[ 21 // { filed: 'ID', title: '编号', width: 120, hidden: true }, 22 // { filed: 'Name', title: '车辆名称', width: 120, align: 'center' }, 23 // { filed: 'Type', title: '型号', width: 120, align: 'center' }, 24 // { filed: 'LicenseTag', title: '牌号', width: 120, align: 'center' }, 25 // { filed: 'Color', title: '座位数', width: 120, align: 'center' }, 26 // { filed: 'Seats', title: '颜色', width: 120, align: 'center' }, 27 // { filed: 'Remarks', title: '备注', width: 920, align: 'center' }, 28 // { 29 // filed: 'Action', title: '操作', width: 550, align: 'center', formatter: function (value, row, index) { 30 // alert(row.Name); 31 // var Action = "<a href='javascript:void(0);' onclick='Edit(" + row.ID + ")'>修改</a>\ 32 //| <a href='javascript:void(0);' onclick='Delete(" + row.ID + ")'>删除</a>"; 33 // return Action; 34 // } 35 // } 36 // ]], 37 // onLoadSuccess: function (data) { alert("success"); }, 38 // onLoadError: function ( 39 // onBeforeEdit: function (index, row) { }, 40 // onAfterEdit: function (index, row) { }, 41 // onCancelEdit: function (index, row) { } 42 // }); 43 }); 44 //添加按钮 45 function Insert() { 46 //alert(roolurl + "/CarManager/CarEdit.aspx?type=add"); 47 //window.parent.OpenWindow("登记车辆", roolurl + "/CarManager/CarEdit.aspx?type=add", "500", "300", "icon-add"); 48 //清空 49 $("#hfID").attr("value", ""); 50 $("#txtCarName").val(""); 51 $("#txtType").val(""); 52 $("#txtLicenseTag").val(""); 53 $("#txtColor").val(""); 54 $('#txtSeats').numberbox('setValue', null); 55 $("#txtRemarks").val(""); 56 //弹出窗口 57 $("#div_Add").dialog({ 58 title: "车辆登记", 59 width: 500, 60 height: 370, 61 closed: false, 62 //buttons: '#div_OkCancel', 63 modal: true //定义窗口是不是模态（modal）窗口。 64 }); 65 } 66 //编辑按钮 67 function Edit() { 68 var row = $("#table_Data").datagrid('getSelected'); 69 if (row != null) { 70 //初始化值 71 $("#hfID").attr("value", row.ID); 72 $("#txtCarName").val(row.Name); 73 $("#txtType").val(row.Type); 74 $("#txtLicenseTag").val(row.LicenseTag); 75 $("#txtColor").val(row.Color); 76 $('#txtSeats').numberbox('setValue', row.Seats); 77 $("#txtRemarks").val(row.Remarks); 78 //弹出窗口 79 $("#div_Add").dialog({ 80 title: "车辆信息编辑", 81 width: 500, 82 height: 370, 83 closed: false, 84 //buttons: '#div_OkCancel', 85 modal: true //定义窗口是不是模态（modal）窗口。 86 }); 87 //$.messager.alert("提示", $('#txtSeats').numberbox('getValue')); 88 } else { 89 $.messager.alert("提示", "请先选中要编辑的行!"); 90 } 91 } 92 //删除按钮 93 function Delete() { 94 var row = $("#table_Data").datagrid('getSelected'); 95 if (row == null) { 96 $.messager.alert("提示", "请先选中要删除的行!"); 97 return false; 98 } 99 $.messager.confirm("提示", "确定要删除么?", function (r) {100 if (r) {101 $.ajax({102 //提交数据的类型 POST GET103 type: "POST",104 //提交的网址105 url: urlAshx,106 //提交的数据107 data: {108 action: "deletecar",109 id: row.ID110 },111 //返回数据的格式112 datatype: "json",//"113 //在请求之前调用的函数114 beforeSend: function () { },115 //成功返回之后调用的函数 116 success: function (data) {117 var data = JSON.parse(data);118 if (data.msg == "1") {119 $("#div_Add").dialog('close', false);//关闭窗口120 $("#table_Data").datagrid('reload');//刷新页面121 }122 $.messager.alert("提示", data.msgbox);123 },124 //调用执行后调用的函数125 complete: function (126 },127 //调用出错执行的函数128 error: function () {129 //请求出错处理130 }131 });132 }133 });134 }135 //提交136 function Submit() {137 var carname = $.trim($("#txtCarName").val());138 var seats = $.trim($("#txtSeats").numberbox('getValue'));139 if (carname == "" || seats == "") {140 $.messager.alert("提示", "车辆名称和座位数不能为空");141 return false;142 }143 144 var id = $.trim($("#hfID").attr("value"));145 if (id != "") {//编辑146 EditCar(id);147 } else {//登记148 AddCar();149 }150 }151 //登记车辆152 function AddCar() {153 $.ajax({154 //提交数据的类型 POST GET155 type: "POST",156 //提交的网址157 url: urlAshx,158 //提交的数据159 data: {160 action: "addcar",161 carname: $("#txtCarName").val(),162 type: $("#txtType").val(),163 licensetag: $("#txtLicenseTag").val(),164 color: $("#txtColor").val(),165 seats: $("#txtSeats").numberbox('getValue'),166 remarks: $("#txtRemarks").val()167 },168 //返回数据的格式169 datatype: "json",//"170 //在请求之前调用的函数171 beforeSend: function () { },172 //成功返回之后调用的函数 173 success: function (data) {174 var data = JSON.parse(data);175 if (data.msg == "1") {176 $("#div_Add").dialog('close', false);//关闭窗口177 $("#table_Data").datagrid('reload');//刷新页面178 }179 $.messager.alert("提示", data.msgbox);180 },181 //调用执行后调用的函数182 complete: function (183 },184 //调用出错执行的函数185 error: function () {186 //请求出错处理187 }188 });189 }190 //编辑车辆191 function EditCar(_id) {192 $.ajax({193 //提交数据的类型 POST GET194 type: "POST",195 //提交的网址196 url: urlAshx,197 //提交的数据198 data: {199 action: "editcar",200 id: _id,201 carname: $("#txtCarName").val(),202 type: $("#txtType").val(),203 licensetag: $("#txtLicenseTag").val(),204 color: $("#txtColor").val(),205 seats: $("#txtSeats").numberbox('getValue'),206 remarks: $("#txtRemarks").val()207 },208 //返回数据的格式209 datatype: "json",//"210 //在请求之前调用的函数211 beforeSend: function () { },212 //成功返回之后调用的函数 213 success: function (data) {214 var data = JSON.parse(data);215 if (data.msg == "1") {216 $("#div_Add").dialog('close', false);//关闭窗口217 $("#table_Data").datagrid('reload');//刷新页面218 }219 $.messager.alert("提示", data.msgbox);220 },221 //调用执行后调用的函数222 complete: function (223 },224 //调用出错执行的函数225 error: function () {226 //请求出错处理227 }228 });229 }
原标题：jquery easyui使用（四）添加,编辑,删除
关键词：jquery
我知道了 