首页 > > 网页制作 > css >

jquery easyui使用（四）··&a…

2018-06-23 23:33:17来源：未知阅读 ()

前端：

<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 }