jquery easyui使用（四）······添加,編輯,刪除 ...
前端：
<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與伺服器交互
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 (XMLHttpRequest, textStatus, errorThrown) { alert("error"); }, 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 GET 103 type: "POST", 104 //提交的網址 105 url: urlAshx, 106 //提交的數據 107 data: { 108 action: "deletecar", 109 id: row.ID 110 }, 111 //返回數據的格式 112 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". 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 (XMLHttpRequest, textStatus) { 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 GET 155 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",//"xml", "html", "script", "json", "jsonp", "text". 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 (XMLHttpRequest, textStatus) { 183 }, 184 //調用出錯執行的函數 185 error: function () { 186 //請求出錯處理 187 } 188 }); 189 } 190 //編輯車輛 191 function EditCar(_id) { 192 $.ajax({ 193 //提交數據的類型 POST GET 194 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",//"xml", "html", "script", "json", "jsonp", "text". 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 (XMLHttpRequest, textStatus) { 223 }, 224 //調用出錯執行的函數 225 error: function () { 226 //請求出錯處理 227 } 228 }); 229 }
