easy ui datagrid 增，删，改，查等基本操作
如下图：
①列表信息图
②添加信息图
③修改信息图
html代码：
<%@ Page Title="" Language="C#" MasterPageFile="~/UI.Web/master/MemberMasterPage.Master" AutoEventWireup="true" CodeBehind="shop.ShopList.aspx.cs" Inherits="B2B_Shop.Client.UI.Web.ui.web.page.shop_ShopList_aspx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%-- easy ui 内核已经引用，因为这个asp页面引用了master母版，所有的引用都在母版里面所以这里就不需要再次引用了。--%>
<script src="../../CommonLib.Js.Config/CommonChangeDateFormat.js"></script>
<script type="text/javascript">
$(function () {
$("#cs").mouseover(function () {
$("#fl").show();
$("#brand").css('height', '38px');
});
$("#cs").mouseout(function () {
$("#fl").hide();
$("#brand").css('height', '27px');
});
//----初始化表单控件 开始----
$('#win_AddShop').window('close'); // close a window
$('#win_SearchCompany').window('close'); // close a window
$('#btn_SearchCompany').bind('click', function () {
$('#win_SearchCompany').window('open'); // open a window
});
//给店铺类型绑定数据
$('#ShopType').combobox({
url: 'Handler/EnumHandler.ashx?Func=getshoptype&format=list',
editable: false, //不可编辑状态
cache: false,
//panelHeight: 'auto',//自动高度适合
panelHeight: "300",
valueField: 'ShopTypeId',
textField: 'ShopTypeName'
});
//给店铺评级绑定数据
$('#ShopRating').combobox({
url: 'Handler/EnumHandler.ashx?Func=getshoprating&format=list',
editable: false, //不可编辑状态
cache: false,
//panelHeight: 'auto',//自动高度适合
panelHeight: "300",
valueField: 'ShopRatingId',
textField: 'ShopRatingName'
});
//给省绑定数据
$('#ProvinceId').combobox({
url: 'Handler/CommonDataHandler.ashx?Func=getprovince&format=list',
editable: false, //不可编辑状态
cache: false,
//panelHeight: 'auto',//自动高度适合
panelHeight: "300",
valueField: 'ProvinceId',
textField: 'Province',
onHidePanel: function () {
$("#LocationId").combobox("setValue", '');
var ProvinceId = $('#ProvinceId').combobox('getValue');
$.ajax({
type: "POST",
url: "Handler/CommonDataHandler.ashx?Func=getcity&format=list&ProvinceId=" + ProvinceId,
cache: false,
dataType: "json",
success: function (data) {
$("#LocationId").combobox("loadData", data);
}
});
}
});
//给市绑定数据
$('#LocationId').combobox({
url: 'Handler/CommonDataHandler.ashx?Func=getcity&format=list',
editable: false, //不可编辑状态
cache: false,
//panelHeight: 'auto',//自动高度适合
panelHeight: "300",
valueField: 'LocationId',
textField: 'City'
});
//----初始化表单控件 结束----
//----加载选择公司列表信息 开始----
grid_Company = $('#tb_CompanyList').datagrid({
loadMsg: '数据正在加载，请耐心等待...',
rownumbers: true,
singleSelect: true,
url: 'Handler/CompanyHandler.ashx?Func=GetCompany&format=list',
queryParams: {
start: 0,
limit: 10
},
method: 'GET',
fitColumns: true,
fit: true,
columns: [[
{ field: 'CompanyTypeName', title: '公司类型', width: 100 },
{ field: 'CompanyId', title: 'CompanyId', hidden: true, width: 100 },
{ field: 'CompanyName', title: '公司名称', width: 100, align: 'left' },
{ field: 'CompanyEngName', title: '公司英文名', width: 100, align: 'left' },
{ field: 'NatureofBusiness', title: '企业性质', width: 100, align: 'left' },
{ field: 'MajorBusiness', title: '主营项目', width: 100, align: 'left' },
{ field: 'MajorBrand', title: '主营品牌', width: 100, align: 'left' },
{ field: 'CompanyInfo', title: '公司简介', width: 100, align: 'left' }
]],
pagination: true,
pageSize: 10,
pageList: [10, 20, 30],
toolbar: [{
text: '公司名称：<input class="easyui-textbox" type="text" id="txt_CompanyName"/>'
},
{
text: '查询',
iconCls: 'icon-search',
handler: function () {
$('#tb_CompanyList').datagrid('load', {
CompanyName: $('#txt_CompanyName').val()
});
}
}
]
})
//选择公司数据
$('#btn_select_Company').click(function () {
var row = grid_Company.datagrid('getSelected');
if (row) {
$("#CompanyName").textbox('setValue', row.CompanyName)//赋值
$("#CompanyId").val(row.CompanyId)//赋值
$('#win_SearchCompany').window('close'); // close a window
} else {
$.messager.show({
title: '警告',
msg: '请先选择公司信息。'
});
}
});
//关闭窗体
$('#btn_cancel_Company').click(function () {
$('#win_SearchCompany').window('close'); // close a window
});
//----加载选择公司列表信息 结束----
//----加载选择店铺列表信息 开始----
grid_Shop = $('#tb_ShopList').datagrid({
loadMsg: '数据正在加载，请耐心等待...',
rownumbers: true,
singleSelect: true,
url: 'Handler/ShopHandler.ashx?Func=GetShop&format=list',
queryParams: {
start: 0,
limit: 10
},
method: 'GET',
//fitColumns: true,//根据最大宽度自动分配列宽，没有横向滚动条；如果注释掉，无论多少列都会有横向滚动条
fit: true,
columns: [[
{ field: 'ShopId', title: 'ShopId', hidden: true, width: 100 },
{ field: 'CompanyName', title: '公司名称', width: 150 },
{ field: 'ShopName', title: '店铺名称', width: 150, align: 'left' },
{ field: 'ShopTypeName', title: '店铺类型', width: 100, align: 'left' },
{ field: 'ShopRatingName', title: '店铺评级', width: 100, align: 'left' },
{
field: 'CreateDate', title: '创建日期', width: 100, align: 'left', formatter: function (value, row, index) {
return ChangeDateFormat(value);
}
},
{
field: 'OpenningDate', title: '通过日期', width: 100, align: 'left', formatter: function (value, row, index) {
return ChangeDateFormat(value);
}
},
{ field: 'LocationId', title: 'LocationId', hidden: true, width: 150, align: 'left' },
{ field: 'LocationName', title: '地区', width: 150, align: 'left' },
{ field: 'CServiceCount', title: '客服数', width: 100, align: 'left' },
{ field: 'ProductScore', title: '产品评分', width: 100, align: 'left' },
{ field: 'ServiceScore', title: '服务评分', width: 100, align: 'left' },
{ field: 'LogisticsScore', title: '物流评分', width: 100, align: 'left' }
]],
pagination: true,
pageSize: 10,
pageList: [10, 20, 30],
toolbar: [{
text: '店铺名称：<input class="easyui-textbox" type="text" id="txt_ShopName"/>'
}, {
text: '查询',
iconCls: 'icon-search',
handler: function () {
$('#tb_ShopList').datagrid('load', {
ShopName: $("#txt_ShopName").val()
});
}
},
{
text: '添加店铺',
iconCls: 'icon-add',
handler: function () {
$('#win_AddShop').window('open'); // close a window
$("#btn_update_Shop").hide();//隐藏更新按钮
$("#btn_add_Shop").show();//显示添加按钮
}
},
{
text: '删除店铺',
iconCls: 'icon-remove',
handler: function () {
$.messager.confirm('确认', '确认删除?', function (row) {
if (row) {
var selectedRow = grid_Shop.datagrid('getSelected'); //获取选中行
$.ajax({
url: 'Handler/ShopHandler.ashx?Func=deleteshop&ShopId=' + selectedRow.ShopId,
success: function () {
$.messager.show({
title: '提示',
msg: '数据删除成功。'
});
}
});
$('#tb_ShopList').datagrid('reload');
}
})
}
},
{
text: '修改店铺',
iconCls: 'icon-edit',
handler: function () {
var row = grid_Shop.datagrid('getSelected');
if (row) {
$('#win_AddShop').window('open'); // close a window
$("#btn_update_Shop").show();//显示更新按钮
$("#btn_add_Shop").hide();//隐藏添加按钮
$('#win_AddShop').window({
title: "修改店铺信息"
}); //修改弹出的window的title
$("#ShopType").combobox('setValue', row.ShopType)//ShopType
$("#CompanyName").textbox('setValue', row.CompanyName)//CompanyName
$("#ShopRating").combobox('setValue', row.ShopRating)//ShopRating
$("#LocationId").combobox('setValue', row.LocationId)//LocationId
$("#CServiceCount").textbox('setValue', row.CServiceCount)//CServiceCount
$("#ShopName").textbox('setValue', row.ShopName)//ShopName
$("#ShopIntro").textbox('setValue', row.ShopIntro)//ShopIntro
$("#CreateDate").val(ChangeDateFormat(row.CreateDate))//CreateDate
$("#OpenningDate").val(ChangeDateFormat(row.OpenningDate))//OpenningDate
$("#ShopId").val(row.ShopId)//ShopId
$("#CompanyId").val(row.CompanyId)//CompanyId
} else {
$.messager.show({
title: '警告',
msg: '请先选择要修改的信息。'
});
}
}
}
]
})
//----加载选择店铺列表信息 结束----
//----添加、修改店铺信息 点击提交按钮保存数据 开始----
$('#btn_add_Shop').click(function () {
//增加遮罩层
$.messager.progress({
title: '温馨提示',
msg: '请稍后...',
text: '数据正在保存中...'
});
$("#addShopForm").form('submit', {
url: 'Handler/ShopHandler.ashx?Func=addshop',
onSubmit: function () {
var isValid = $("#addShopForm").form('validate');
if (!isValid) {
$.messager.progress('close');//关闭遮罩
}
return isValid; // 返回false终止表单提交
},
success: function (result) {
$.messager.progress('close');//关闭遮罩
$('#win_AddShop').window('close'); // close a window
$("#addShopForm").form('clear');
$('#tb_ShopList').datagrid('reload');
$.messager.show({
title: '提示',
msg: '数据保存成功。'
});
}, failure: function (result) {
$.messager.progress('close');//关闭遮罩
$.messager.show({
title: '提示',
msg: '数据保存失败。'
});
}
});
});
$('#btn_update_Shop').click(function () {
//增加遮罩层
$.messager.progress({
title: '温馨提示',
msg: '请稍后...',
text: '数据正在保存中...'
});
$("#addShopForm").form('submit', {
url: 'Handler/ShopHandler.ashx?Func=updateshop',
onSubmit: function () {
var isValid = $("#addShopForm").form('validate');
if (!isValid) {
$.messager.progress('close');//关闭遮罩
}
return isValid; // 返回false终止表单提交
},
success: function (result) {
$.messager.progress('close');//关闭遮罩
$("#addShopForm").form('clear');
$('#win_AddShop').window('close'); // close a window
$('#tb_ShopList').datagrid('reload');
$.messager.show({
title: '提示',
msg: '数据保存成功。'
});
}, failure: function (result) {
$.messager.progress('close');//关闭遮罩
$.messager.show({
title: '提示',
msg: '数据保存失败。'
});
}
});
});
//点击重置按钮
$('#btn_reset_Shop').click(function () {
$("#addShopForm").form('clear');
$('#win_AddShop').window('close'); // close a window
});
//----添加、修改店铺信息 点击提交按钮保存数据 结束----
})
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div style="padding: 3px 2px; border-bottom: 1px solid #ccc">
<h1>我的店铺信息</h1>
</div>
<%-- 店铺信息列表 开始--%>
<div style="width: 100%; height: 500px; padding: 5px;">
<table id="tb_ShopList"></table>
</div>
<%-- 店铺信息列表 结束--%>
<%-- 添加店铺信息 开始--%>
<div id="win_AddShop" class="easyui-window" title="添加店铺信息" data-options="top:'30%'" style="width: 400px; height: 400px; padding: 5px;">
<div style="padding: 10px">
<form id="addShopForm" class="easyui-form" method="post">
<table style="width: 100%;">
<tr>
<td>店铺名称:</td>
<td>
<input class="easyui-textbox" type="text" id="ShopName" name="ShopName" data-options="required:true" style="width: 200px;">
</tr>
<tr>
<td>厂商名称:</td>
<td>
<input class="easyui-textbox" type="text" id="CompanyName" name="CompanyName" data-options="required:true" style="width: 200px;">
<a id="btn_SearchCompany" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">选择厂商</a>
</td>
</tr>
<tr>
<td>店铺类型:</td>
<td>
<select data-options="required:true" id="ShopType" name="ShopType" style="width: 200px;"></select></td>
</tr>
<tr>
<td>店铺评级:</td>
<td>
<select data-options="required:true" id="ShopRating" name="ShopRating" style="width: 200px;"></select></td>
</tr>
<tr>
<td>客服数:</td>
<td>
<input class="easyui-textbox" type="text" id="CServiceCount" name="CServiceCount" data-options="required:true" style="width: 200px;">
</tr>
<tr>
<td>店铺说明:</td>
<td>
<input class="easyui-textbox" type="text" id="ShopIntro" name="ShopIntro" data-options="required:true,multiline:true" style="height: 60px; width: 200px;">
</tr>
<tr>
<td>省:</td>
<td>
<select id="ProvinceId" data-options="required:true" name="ProvinceId" style="width: 200px;">
</select></td>
</tr>
<tr>
<td>市:</td>
<td>
<select id="LocationId" data-options="required:true" name="LocationId" style="width: 200px;">
</select></td>
</tr>
</table>
<%-- 隐藏控件 开始--%>
<input id="ShopId" name="ShopId" type="hidden" />
<input id="CompanyId" name="CompanyId" type="hidden" />
<input id="ShopPicc0" name="ShopPicc0" type="hidden" />
<input id="ShopPicc1" name="ShopPicc1" type="hidden" />
<input id="ShopAuditingState" name="ShopAuditingState" type="hidden" />
<input id="ShopClose" name="ShopClose" type="hidden" />
<input id="ShopState" name="ShopState" type="hidden" />
<input id="ProductScore" name="ProductScore" type="hidden" />
<input id="ServiceScore" name="ServiceScore" type="hidden" />
<input id="LogisticsScore" name="LogisticsScore" type="hidden" />
<input id="CreateDate" name="CreateDate" type="hidden" />
<input id="OpenningDate" name="OpenningDate" type="hidden" />
<%-- 隐藏控件 结束--%>
</form>
</div>
<div style="text-align: right; padding: 5px;">
<a id="btn_add_Shop" name="btn_add_Shop" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)">添加</a>
<a id="btn_update_Shop" name="btn_update_Shop" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)">保存</a>
<a id="btn_reset_Shop" name="btn_reset_Shop" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)">取消</a>
</div>
</div>
<%-- 添加店铺信息 结束--%>
<%-- 公司信息列表 开始--%>
<div id="win_SearchCompany" class="easyui-window" title="公司信息列表" data-options="top:'30%'" style="width: 800px; height: 500px; padding: 5px;">
<div style="width: 770px; height: 400px; padding: 5px;">
<table id="tb_CompanyList"></table>
</div>
<div style="text-align: right; padding: 5px;">
<a id="btn_select_Company" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)">选择</a>
<a id="btn_cancel_Company" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)">取消</a>
</div>
</div>
<%-- 公司信息列表 结束--%>
</asp:Content>
easy ui datagrid 增，删，改，查等基本操作的更多相关文章
- 好用的SQL TVP~~独家赠送[增-删-改-查]的例子
以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化. 本系列主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础] ...
- iOS FMDB的使用(增,删,改,查,sqlite存取图片)
iOS FMDB的使用(增,删,改,查,sqlite存取图片) 在上一篇博客我对sqlite的基本使用进行了详细介绍... 但是在实际开发中原生使用的频率是很少的... 这篇博客我将会较全面的介绍FM ...
- iOS sqlite3 的基本使用(增 删 改 查)
iOS sqlite3 的基本使用(增 删 改 查) 这篇博客不会讲述太多sql语言,目的重在实现sqlite3的一些基本操作. 例:增 删 改 查 如果想了解更多的sql语言可以利用强大的互联网. ...
- django ajax增 删 改 查
具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
- ADO.NET 增 删 改 查
ADO.NET:(数据访问技术)就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 ADO.NET所有数据访 ...
- MVC EF 增 删 改 查
using System;using System.Collections.Generic;using System.Linq;using System.Web;//using System.Data ...
- python基础中的四大天王-增-删-改-查
列表-list-[] 输入内存储存容器 发生改变通常直接变化,让我们看看下面列子 增---默认在最后添加 #append()--括号中可以是数字,可以是字符串,可以是元祖,可以是集合,可以是字典 #l ...
- 简单的php数据库操作类代码(增,删,改,查)
这几天准备重新学习,梳理一下知识体系,同时按照功能模块划分做一些东西.所以.mysql的操作成为第一个要点.我写了一个简单的mysql操作类,实现数据的简单的增删改查功能. 数据库操纵基本流程为: 1 ...
- MongoDB增 删 改 查
增 增加单篇文档 > db.stu.insert({sn:'001', name:'lisi'}) WriteResult({ "nInserted" : 1 }) > ...
随机推荐
- postgresql常用SQL
--查看数据库 select * from pg_database; --查看表空间 select * from pg_tablespace; --查看语言 select * from pg_lang ...
- hdu 4604 动态规划
思路:这题的感觉就是最长上升子序列的升级版.首先对于最长上升子序列要用n*log(n)的算法才行,这个复杂度的算法可以从hdu1025得到启发.然后就是什么情况下最优问题了.对于序列中某个数i,找出其 ...
- git 一个文件还原到某个提交的commit
git checkout ${commit} /path/to/file 参考文献中1的参考链接中的git-checkout(1) Manual Page 中的Name: git-checkout - ...
- asp.net微信支付打通发货通知代码
上次遇到微信支付,发货接口的时候,官方的demo也没有提供相应的代码 ,因本人技术有限,百度 google 很久都没有asp.net 版本的,最后只好硬着头皮自己搞,没想到官方文档也是错的. 我这一步 ...
- Commons Configuration2 - Quick start guide
原文:http://commons.apache.org/proper/commons-configuration/userguide/quick_start.html Reading a prope ...
- OpenXml Excel数据导入导出(含图片的导入导出)
声明:里面的很多东西是基于前人的基础上实现的,具体是哪些人 俺忘了,我做了一些整合和加工 这个项目居于openxml做Excel的导入导出,可以用OpenXml读取Excel中的图片 和OpenXml ...
- 【Cocos2d入门教程六】Cocos2d-x事件篇之触摸
Cocos游戏当中产生一个事件时,可以有多个对象在监听该事件,所以有优先级(Priority).优先级越高(Priority值越小),事件响应越靠前. 关系图: 新 事件分发机制:在2.x 版本事件处 ...
- jQuery中ajax应用
一:Ajax介绍 1.ajax的定义:客服端js所发起的http请求的代号,无刷新的数据更新. 2.ajax原理: 运用XHTML+CSS来表达信息,运用javascript操作DOM(Documen ...
- 本招聘信息2014年长期有效！杭州派尔科技高薪诚聘android开发（10K-20K），web前端开发（8K-15K），IOS开发（15K-25K）
杭州派尔科技有限公司发展至今,离不开员工的无私奉献和辛勤耕耘,在努力创造更好成绩的同时,公司也不忘回馈每一位员工的努力与付出.1.全面的绩效考核机制,让发展空间近在眼前!公司力争让每一位员工都了解自己 ...
- iPhone左下角app图标
iOS8之后,苹果增加了一个新功能.会根据位置,自动在锁屏界面左下角出现相关应用.比如用户在苹果零售店时候,右下角会出现Apple Store官方应用的快捷方式,按住左下角的图标向上滑动,即可快速解锁 ...