如下图：
①列表信息图
②添加信息图
③修改信息图
html代码：
1 <%@ 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" %> 2 3 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 4 5 <%-- easy ui 内核已经引用，因为这个asp页面引用了master母版，所有的引用都在母版里面所以这里就不需要再次引用了。--%> 6 <script src='/images/loading.gif' data-original="../../CommonLib.Js.Config/CommonChangeDateFormat.js"></script> 7 8 <script type="text/javascript"> 9 10 $(function () { 11 $("#cs").mouseover(function () { 12 $("#fl").show(); 13 $("#brand").css('height', '38px'); 14 }); 15 $("#cs").mouseout(function () { 16 17 $("#fl").hide(); 18 $("#brand").css('height', '27px'); 19 }); 20 21 //----初始化表单控件 开始---- 22 $('#win_AddShop').window('close'); // close a window 23 $('#win_SearchCompany').window('close'); // close a window 24 $('#btn_SearchCompany').bind('click', function () { 25 $('#win_SearchCompany').window('open'); // open a window 26 }); 27 28 //给店铺类型绑定数据 29 $('#ShopType').combobox({ 30 url: 'Handler/EnumHandler.ashx?Func=getshoptype&format=list', 31 editable: false, //不可编辑状态 32 cache: false, 33 //panelHeight: 'auto',//自动高度适合 34 panelHeight: "300", 35 valueField: 'ShopTypeId', 36 textField: 'ShopTypeName' 37 }); 38 //给店铺评级绑定数据 39 $('#ShopRating').combobox({ 40 url: 'Handler/EnumHandler.ashx?Func=getshoprating&format=list', 41 editable: false, //不可编辑状态 42 cache: false, 43 //panelHeight: 'auto',//自动高度适合 44 panelHeight: "300", 45 valueField: 'ShopRatingId', 46 textField: 'ShopRatingName' 47 }); 48 //给省绑定数据 49 $('#ProvinceId').combobox({ 50 url: 'Handler/CommonDataHandler.ashx?Func=getprovince&format=list', 51 editable: false, //不可编辑状态 52 cache: false, 53 //panelHeight: 'auto',//自动高度适合 54 panelHeight: "300", 55 valueField: 'ProvinceId', 56 textField: 'Province', 57 onHidePanel: function () { 58 $("#LocationId").combobox("setValue", ''); 59 var ProvinceId = $('#ProvinceId').combobox('getValue'); 60 61 $.ajax({ 62 type: "POST", 63 url: "Handler/CommonDataHandler.ashx?Func=getcity&format=list&ProvinceId=" + ProvinceId, 64 cache: false, 65 dataType: "json", 66 success: function (data) { 67 $("#LocationId").combobox("loadData", data); 68 } 69 }); 70 } 71 }); 72 //给市绑定数据 73 $('#LocationId').combobox({ 74 url: 'Handler/CommonDataHandler.ashx?Func=getcity&format=list', 75 editable: false, //不可编辑状态 76 cache: false, 77 //panelHeight: 'auto',//自动高度适合 78 panelHeight: "300", 79 valueField: 'LocationId', 80 textField: 'City' 81 }); 82 //----初始化表单控件 结束---- 83 //----加载选择公司列表信息 开始---- 84 85 grid_Company = $('#tb_CompanyList').datagrid({ 86 loadMsg: '数据正在加载，请耐心等待...', 87 rownumbers: true, 88 singleSelect: true, 89 url: 'Handler/CompanyHandler.ashx?Func=GetCompany&format=list', 90 queryParams: { 91 start: 0, 92 limit: 10 93 }, 94 method: 'GET', 95 fitColumns: true, 96 fit: true, 97 columns: [[ 98 { field: 'CompanyTypeName', title: '公司类型', width: 100 }, 99 { field: 'CompanyId', title: 'CompanyId', hidden: true, width: 100 },100 { field: 'CompanyName', title: '公司名称', width: 100, align: 'left' },101 { field: 'CompanyEngName', title: '公司英文名', width: 100, align: 'left' },102 { field: 'NatureofBusiness', title: '企业性质', width: 100, align: 'left' },103 { field: 'MajorBusiness', title: '主营项目', width: 100, align: 'left' },104 { field: 'MajorBrand', title: '主营品牌', width: 100, align: 'left' },105 { field: 'CompanyInfo', title: '公司简介', width: 100, align: 'left' }106 ]],107 pagination: true,108 pageSize: 10,109 pageList: [10, 20, 30],110 toolbar: [{111 text: '公司名称：<input type="text" id="txt_CompanyName"/>'112 },113 {114 text: '查询',115 iconCls: 'icon-search',116 handler: function () {117 $('#tb_CompanyList').datagrid('load', {118 CompanyName: $('#txt_CompanyName').val()119 });120 }121 }122 ]123 })124 125 //选择公司数据 126 $('#btn_select_Company').click(function () {127 var row = grid_Company.datagrid('getSelected');128 if (row) {129 $("#CompanyName").textbox('setValue', row.CompanyName)//赋值130 $("#CompanyId").val(row.CompanyId)//赋值 131 $('#win_SearchCompany').window('close'); // close a window 132 } else {133 $.messager.show({134 title: '警告',135 msg: '请先选择公司信息。'136 });137 }138 });139 //关闭窗体 140 $('#btn_cancel_Company').click(function () {141 $('#win_SearchCompany').window('close'); // close a window 142 });143 //----加载选择公司列表信息 结束----144 //----加载选择店铺列表信息 开始---- 145 146 grid_Shop = $('#tb_ShopList').datagrid({147 loadMsg: '数据正在加载，请耐心等待...',148 rownumbers: true,149 singleSelect: true,150 url: 'Handler/ShopHandler.ashx?Func=GetShop&format=list',151 queryParams: {152 start: 0,153 limit: 10154 },155 method: 'GET',156 //fitColumns: true,//根据最大宽度自动分配列宽，没有横向滚动条；如果注释掉，无论多少列都会有横向滚动条157 fit: true,158 columns: [[159 { field: 'ShopId', title: 'ShopId', hidden: true, width: 100 },160 { field: 'CompanyName', title: '公司名称', width: 150 },161 { field: 'ShopName', title: '店铺名称', width: 150, align: 'left' },162 { field: 'ShopTypeName', title: '店铺类型', width: 100, align: 'left' },163 { field: 'ShopRatingName', title: '店铺评级', width: 100, align: 'left' },164 {165 field: 'CreateDate', title: '创建日期', width: 100, align: 'left', formatter: function (value, row, index) {166 return ChangeDateFormat(value);167 }168 },169 {170 field: 'OpenningDate', title: '通过日期', width: 100, align: 'left', formatter: function (value, row, index) {171 return ChangeDateFormat(value);172 }173 },174 { field: 'LocationId', title: 'LocationId', hidden: true, width: 150, align: 'left' },175 { field: 'LocationName', title: '地区', width: 150, align: 'left' },176 { field: 'CServiceCount', title: '客服数', width: 100, align: 'left' },177 { field: 'ProductScore', title: '产品评分', width: 100, align: 'left' },178 { field: 'ServiceScore', title: '服务评分', width: 100, align: 'left' },179 { field: 'LogisticsScore', title: '物流评分', width: 100, align: 'left' }180 ]],181 pagination: true,182 pageSize: 10,183 pageList: [10, 20, 30],184 toolbar: [{185 text: '店铺名称：<input type="text" id="txt_ShopName"/>'186 }, {187 text: '查询',188 iconCls: 'icon-search',189 handler: function () {190 $('#tb_ShopList').datagrid('load', {191 ShopName: $("#txt_ShopName").val()192 });193 }194 },195 {196 text: '添加店铺',197 iconCls: 'icon-add',198 handler: function () {199 $('#win_AddShop').window('open'); // close a window 200 $("#btn_update_Shop").hide();//隐藏更新按钮201 $("#btn_add_Shop").show();//显示添加按钮202 }203 },204 {205 text: '删除店铺',206 iconCls: 'icon-remove',207 handler: function () {208 $.messager.confirm('确认', '确认删除?', function (row) {209 if (row) {210 var selectedRow = grid_Shop.datagrid('getSelected'); //获取选中行 211 $.ajax({212 url: 'Handler/ShopHandler.ashx?Func=deleteshop&ShopId=' + selectedRow.ShopId,213 success: function () {214 $.messager.show({215 title: '提示',216 msg: '数据删除成功。'217 });218 }219 });220 221 $('#tb_ShopList').datagrid('reload');222 }223 })224 }225 },226 {227 text: '修改店铺',228 iconCls: 'icon-edit',229 handler: function () {230 var row = grid_Shop.datagrid('getSelected');231 if (row) {232 $('#win_AddShop').window('open'); // close a window 233 $("#btn_update_Shop").show();//显示更新按钮234 $("#btn_add_Shop").hide();//隐藏添加按钮235 236 $('#win_AddShop').window({237 title: "修改店铺信息"238 }); //修改弹出的window的title239 240 $("#ShopType").combobox('setValue', row.ShopType)//ShopType241 $("#CompanyName").textbox('setValue', row.CompanyName)//CompanyName242 $("#ShopRating").combobox('setValue', row.ShopRating)//ShopRating243 $("#LocationId").combobox('setValue', row.LocationId)//LocationId244 $("#CServiceCount").textbox('setValue', row.CServiceCount)//CServiceCount245 $("#ShopName").textbox('setValue', row.ShopName)//ShopName246 $("#ShopIntro").textbox('setValue', row.ShopIntro)//ShopIntro247 $("#CreateDate").val(ChangeDateFormat(row.CreateDate))//CreateDate248 $("#OpenningDate").val(ChangeDateFormat(row.OpenningDate))//OpenningDate249 250 $("#ShopId").val(row.ShopId)//ShopId 251 $("#CompanyId").val(row.CompanyId)//CompanyId 252 253 } else {254 $.messager.show({255 title: '警告',256 msg: '请先选择要修改的信息。'257 });258 }259 }260 }261 ]262 })263 //----加载选择店铺列表信息 结束----264 265 //----添加、修改店铺信息 点击提交按钮保存数据 开始----266 $('#btn_add_Shop').click(function () {267 //增加遮罩层 268 $.messager.progress({269 title: '温馨提示',270 msg: '请稍后...',271 text: '数据正在保存中...'272 });273 274 $("#addShopForm").form('submit', {275 url: 'Handler/ShopHandler.ashx?Func=addshop',276 onSubmit: function () {277 var isValid = $("#addShopForm").form('validate');278 if (!isValid) {279 $.messager.progress('close');//关闭遮罩280 }281 return isValid; // 返回false终止表单提交282 },283 success: function (result) {284 $.messager.progress('close');//关闭遮罩285 286 $('#win_AddShop').window('close'); // close a window 287 $("#addShopForm").form('clear');288 $('#tb_ShopList').datagrid('reload');289 290 $.messager.show({291 title: '提示',292 msg: '数据保存成功。'293 });294 295 }, failure: function (result) {296 $.messager.progress('close');//关闭遮罩297 $.messager.show({298 title: '提示',299 msg: '数据保存失败。'300 });301 }302 });303 304 });305 306 $('#btn_update_Shop').click(function () {307 //增加遮罩层 308 $.messager.progress({309 title: '温馨提示',310 msg: '请稍后...',311 text: '数据正在保存中...'312 });313 $("#addShopForm").form('submit', {314 url: 'Handler/ShopHandler.ashx?Func=updateshop',315 onSubmit: function () {316 var isValid = $("#addShopForm").form('validate');317 if (!isValid) {318 $.messager.progress('close');//关闭遮罩319 }320 return isValid; // 返回false终止表单提交321 },322 success: function (result) {323 $.messager.progress('close');//关闭遮罩324 325 $("#addShopForm").form('clear');326 $('#win_AddShop').window('close'); // close a window 327 $('#tb_ShopList').datagrid('reload');328 329 $.messager.show({330 title: '提示',331 msg: '数据保存成功。'332 });333 334 }, failure: function (result) {335 $.messager.progress('close');//关闭遮罩336 $.messager.show({337 title: '提示',338 msg: '数据保存失败。'339 });340 }341 });342 343 });344 345 //点击重置按钮346 $('#btn_reset_Shop').click(function () {347 $("#addShopForm").form('clear');348 $('#win_AddShop').window('close'); // close a window 349 });350 //----添加、修改店铺信息 点击提交按钮保存数据 结束----351 })352 353 </script>354 355 </asp:Content>356 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">357 358 <div style="padding: 3px 2px; border-bottom: 1px solid #ccc">359 <h1>我的店铺信息</h1>360 </div>361 <%-- 店铺信息列表 开始--%>362 <div style="width: 100%; height: 500px; padding: 5px;">363 <table id="tb_ShopList"></table>364 </div>365 <%-- 店铺信息列表 结束--%>366 367 <%-- 添加店铺信息 开始--%>368 <div id="win_AddShop" class="easyui-window" title="添加店铺信息" data-options="top:'30%'" style="width: 400px; height: 400px; padding: 5px;">369 <div style="padding: 10px">370 <form id="addShopForm" class="easyui-form" method="post">371 <table style="width: 100%;">372 <tr>373 <td>店铺名称:</td>374 <td>375 <input class="easyui-textbox" type="text" id="ShopName" name="ShopName" data-options="required:true" style="width: 200px;">376 </tr>377 <tr>378 <td>厂商名称:</td>379 <td>380 <input class="easyui-textbox" type="text" id="CompanyName" name="CompanyName" data-options="required:true" style="width: 200px;">381 <a id="btn_SearchCompany" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">选择厂商</a>382 </td>383 </tr>384 <tr>385 <td>店铺类型:</td>386 <td>387 <select data-options="required:true" id="ShopType" name="ShopType" style="width: 200px;"></select></td>388 </tr>389 <tr>390 <td>店铺评级:</td>391 <td>392 <select data-options="required:true" id="ShopRating" name="ShopRating" style="width: 200px;"></select></td>393 </tr>394 395 <tr>396 <td>客服数:</td>397 <td>398 <input class="easyui-textbox" type="text" id="CServiceCount" name="CServiceCount" data-options="required:true" style="width: 200px;">399 </tr>400 <tr>401 <td>店铺说明:</td>402 <td>403 <input class="easyui-textbox" type="text" id="ShopIntro" name="ShopIntro" data-options="required:true,multiline:true" style="height: 60px; width: 200px;">404 </tr>405 <tr>406 <td>省:</td>407 <td>408 <select id="ProvinceId" data-options="required:true" name="ProvinceId" style="width: 200px;">409 </select></td>410 </tr>411 <tr>412 <td>市:</td>413 <td>414 <select id="LocationId" data-options="required:true" name="LocationId" style="width: 200px;">415 </select></td>416 </tr>417 </table>418 <%-- 隐藏控件 开始--%>419 <input id="ShopId" name="ShopId" type="hidden" />420 <input id="CompanyId" name="CompanyId" type="hidden" />421 <input id="ShopPicc0" name="ShopPicc0" type="hidden" />422 <input id="ShopPicc1" name="ShopPicc1" type="hidden" />423 <input id="ShopAuditingState" name="ShopAuditingState" type="hidden" />424 <input id="ShopClose" name="ShopClose" type="hidden" />425 <input id="ShopState" name="ShopState" type="hidden" />426 <input id="ProductScore" name="ProductScore" type="hidden" />427 <input id="ServiceScore" name="ServiceScore" type="hidden" />428 <input id="LogisticsScore" name="LogisticsScore" type="hidden" />429 <input id="CreateDate" name="CreateDate" type="hidden" />430 <input id="OpenningDate" name="OpenningDate" type="hidden" />431 <%-- 隐藏控件 结束--%>432 </form>433 </div>434 <div style="text-align: right; padding: 5px;">435 <a id="btn_add_Shop" name="btn_add_Shop" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)">添加</a>436 <a id="btn_update_Shop" name="btn_update_Shop" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)">保存</a>437 <a id="btn_reset_Shop" name="btn_reset_Shop" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)">取消</a>438 </div>439 440 </div>441 <%-- 添加店铺信息 结束--%>442 443 <%-- 公司信息列表 开始--%>444 <div id="win_SearchCompany" class="easyui-window" title="公司信息列表" data-options="top:'30%'" style="width: 800px; height: 500px; padding: 5px;">445 <div style="width: 770px; height: 400px; padding: 5px;">446 <table id="tb_CompanyList"></table>447 </div>448 <div style="text-align: right; padding: 5px;">449 <a id="btn_select_Company" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)">选择</a>450 <a id="btn_cancel_Company" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)">取消</a>451 </div>452 </div>453 <%-- 公司信息列表 结束--%>454 </asp:Content>
原标题：easy ui datagrid 增，删，改，查等基本操作
关键词：DataGrid
我知道了 