easyuidatagrid增，删，改，查等基本操作

  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="../../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 class="easyui-textbox" 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 class="easyui-textbox"  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>