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与服务器交互
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 easyui使用（四）······添加,编辑,删除的更多相关文章
- 雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框
jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 添加分页组件
jQuery EasyUI 数据网格 - 添加分页组件 本实例演示如何从服务器端加载数据,如何添加分页组件(pagination)到数据网格(datagrid). 创建数据网格(DataGrid) 为 ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 添加查询功能
jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中.然后演示如何根据用户输入的搜索关键词搜寻显示结果. 创建数据网格( ...
- jQuery easyuI datagrid 多行编辑
在easyUI 动态绑定部分数据后,需要有部分列可以修改,研究了一天终于搞定.这是小弟的做法,望各位有好招的大侠指点. 1.添加jQuery 和jQuery easyuI的引用. 2.添加id为tt的 ...
- JQuery操作option的添加、删除、取值
1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkTex ...
- JQuery Easyui/TopJUI表格基本的删除功能（删除当前行和多选删除）
需求:数据表格datagrid实现删除当前行和多选删除的功能. html <a href="javascript:void(0)" data-toggle="top ...
- jquery easyui datagrid设置可编辑行的某个列不可编辑
function onClickRowd(index1, field1) { if (editIndexd != index1) { if (endEditing()) { $('#dg').data ...
- 如何利用jquery来给input添加或删除disabled属性
1.以下二种方法是可以为input添加disabled属性的方法: //两种方法设置disabled属性 $(".save").attr("disabled", ...
- easyui 验证动态添加和删除问题
$.extend($.fn.validatebox.methods, { remove: function(jq, newposition){ return jq.each(function(){ $ ...
随机推荐
- Event Store 2.0发布，带来了安全支持和测试版Projections库
Event Store 2.0版本于上周发布,它带来了安全支持允许锁定Event Store和在事件流上设置访问控制列表.其主要新特性包括: HTTP和TCP之上的身份认证,包括账户管理 测试版Pro ...
- Code First开发系列之管理并发和事务
返回<8天掌握EF的Code First开发>总目录 本篇目录 理解并发 理解积极并发 理解消极并发 使用EF实现积极并发 EF的默认并发 设计处理字段级别的并发应用 实现RowVersi ...
- (新年快乐)ABP理论学习之本地化(2016第一篇)
返回总目录 本篇目录 应用语言 本地化资源 获取本地化文本 扩展本地化资源 最佳实践 应用语言 一个应用至少有一种UI语言,许多应用不止有一种语言.ABP为应用提供了一个灵活的本地化系统. 第一件事情 ...
- 剑指Offer面试题：15.反转链表
一.题目:反转链表 题目:定义一个函数,输入一个链表的头结点,反转该链表并输出反转后链表的头结点. 链表结点定义如下,这里使用的是C#描述: public class Node { public in ...
- EasyPR--开发详解（2）车牌定位
这篇文章是一个系列中的第三篇.前两篇的地址贴下:介绍.详解1.我撰写这系列文章的目的是:1.普及车牌识别中相关的技术与知识点:2.帮助开发者了解EasyPR的实现细节:3.增进沟通. EasyPR的项 ...
- A*寻路算法
对于初学者而言,A*寻路已经是个比较复杂的算法了,为了便于理解,本文降低了A*算法的难度,规定只能横竖(四方向)寻路,而无法直接走对角线,使得整个算法更好理解. 简而言之,A*寻路就是计算从起点经过该 ...
- sqlalchemy(二)高级用法
sqlalchemy(二)高级用法 本文将介绍sqlalchemy的高级用法. 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此需要在address上增 ...
- 使用GDB调试Go语言
用Go语言已经有一段时间了,总结一下如何用GDB来调试它! ps:网上有很多文章都有描述,但是都不是很全面,这里将那些方法汇总一下 GDB简介 GDB是GNU开源组织发布的⼀一个强⼤大的UNIX下的 ...
- ZooKeeper典型应用场景
ZooKeeper典型应用场景一览 数据发布与订阅(配置中心) 发布与订阅模型,即所谓的配置中心,顾名思义就是发布者将数据发布到ZK节点上,供订阅者动态获取数据,实现配置信息的集中式管理和动态更新.例 ...
- Android笔记——提升ListView的运行效率
之所以说 ListView 这个控件很难用,就是因为它有很多的细节可以优化,其中运行效率就是很重要的一点.目前我们ListView 的运行效率是很低的,因为在 FruitAdapter 的getVie ...