你的位置:首页 > ASP.net教程

[ASP.net教程]jquery easyui使用(四)添加,编辑,删除


前端:

<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="../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与服务器交互

 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 }