zoukankan      html  css  js  c++  java
  • jquery动态添加/删除 tr/td

      1 <head runat="server">
      2     <title></title>
      3     <!--easyui -->
      4     <link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/icon.css" />
      5     <link rel="stylesheet" type="text/css" href="../../script/easy_ui/themes/demo.css" />
      6     <link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/default/easyui.css" />
      7     <link href="../../css/function.css" rel="stylesheet" type="text/css" />
      8     <script type="text/javascript" src="../../script/jquery-1.8.2.js"></script>
      9     <script type="text/javascript" src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_TW.js"></script>
     10     <script type="text/javascript" src="../../script/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
     11     <script type="text/javascript" src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
     12     <!--上传控件 -->
     13     <link href="../../css/images/style.css" rel="stylesheet" type="text/css" />
     14     <script type='text/javascript' src="../../script/swfupload/swfupload.js"></script>
     15     <script type='text/javascript' src="../../script/swfupload/swfupload.queue.js"></script>
     16     <script type="text/javascript" src="../../script/swfupload/swfupload.handlers.js"></script>
     17     <script src="../../script/jquery.form.min.js" type="text/javascript"></script>
     18     <script type="text/javascript" src="../../script/function.js"></script>
     19     <!--编辑器 -->
     20     <script type="text/javascript" charset="utf-8" src="../../editor/kindeditor-min.js"></script>
     21     <script type="text/javascript" charset="utf-8" src="../../editor/lang/zh_CN.js"></script>
     22     <script type="text/javascript">
     23         /* jquery easyui 操作*/
     24         window.onload = function () {
     25             InitGird();
     26         }
     27         //加载编辑器
     28         var editor;
     29         $(function () {
     30             editor = KindEditor.create('textarea[name="Describe"]', {
     31                 resizeType: 1,
     32                 uploadJson: '../ashx/upload_ajax.ashx?action=EditorFile&IsWater=1',
     33                 fileManagerJson: '../ashx/upload_ajax.ashx?action=ManagerFile',
     34                 allowFileManager: true
     35             });
     36         });
     37         //初始化上传控件
     38         $(function () {
     39             InitSWFUpload("../ashx/upload_ajax.ashx", "Filedata", "1024 KB", "../../script/swfupload/swfupload.swf", 1, 1);
     40         });
     41         //搜索
     42         function Search() {
     43             $('#dgCaseInfo').datagrid('load', {
     44                 action: "loadListPage",
     45                 Names: $("#Names").val()
     46             });
     47         }
     48         //初始化表格
     49         function InitGird() {
     50             $("#dgCaseInfo").datagrid({
     51                 autoRowHeight: false,
     52                 loadMsg: '正在努力加载中...',
     53                 url: '../ashx/GetSm_CaseInformation.ashx?types=loadListPage', //请求数据的页面
     54                 sortName: 'ID', //排序字段
     55                 idField: 'ID', //标识字段,主键
     56                 iconCls: '', //标题左边的图片
     57                 singleSelect: true,
     58                  '100%', //宽度
     59                 height: 'auto', //高度
     60                 nowrap: true, //是否换行,True 就会把数据显示在一行里
     61                 striped: true, //True 奇偶行使用不同背景色
     62                 collapsible: false, //可折叠
     63                 sortOrder: 'desc', //排序类型
     64                 remoteSort: true, //定义是否从服务器给数据排序
     65                 fit: true,
     66                 singleSelect: true, //是否只允许选择一行
     67                 selectOnCheck: false, //单击复选框不会选中行
     68                 fitColumns: true, //列自动缩放
     69                 columns: [[
     70                        { field: 'Name', title: '商品名称',  200, align: 'left' },
     71                       { field: 'Add_Time', title: '添加时间',  100, align: 'left' },
     72                       { field: 'Describe', title: '描述',  100, align: 'left', hidden: true },
     73                       { field: 'FilePath', title: '案例照片',  100, align: 'left',
     74                           formatter: function (value, row, index) {
     75                               if (row.FilePath != "") {
     76                                   return '<a href=javascript:ShowBigview(' + index + ')><img alt="照片" src="../..' + row.FilePath + '"width="100px" height="25px"/></a>'
     77                               } else {
     78                                   return "暂无图片"
     79                               }
     80                           }
     81                       },
     82                       { field: 'Flag', title: '状态',  100, align: 'left',
     83                           formatter: function (value, row, index) {
     84                               if (row.Flag == 0) {
     85                                   return "上架";
     86                               } else {
     87                                   return "下架";
     88                               }
     89                           }
     90                       },
     91                       { field: 'TypeID', title: '商品类型',  100, align: 'left', hidden: true },
     92                       { field: 'MonadID', title: '企业名称',  100, align: 'left', hidden: true },
     93                       { field: 'MonadName', title: '企业名称',  100, align: 'left', hidden: true }
     94                       ]],
     95                 toolbar: "#toolbar",
     96                 queryParams: { "action": "query" },
     97                 pagination: true, //是否开启分页
     98                 pagePosition: 'bottom', //分页位置
     99                 pageNumber: 1, //默认索引页
    100                 pageSize: 10, //默认一页数据条数
    101                 onDblClickRow: function (rowIndex, rowData) {//行双击事件
    102                     Edit();
    103                 }
    104             })
    105         }
    106         var url;
    107         //添加一条数据
    108         function Add() {
    109             $("#tdLeft").remove();//删除秒杀时间td
    110             $("#tdSeckill").remove(); //删除秒杀时间td
    111             loadTypeID();
    112             editor.html("");
    113             $('#dlg').dialog('open').dialog('setTitle', '添加');
    114             $('#form1').form('clear');
    115             url = '../ashx/GetSm_CaseInformation.ashx?types=ListAdd';
    116             $("input[name='Flag']").eq(0).attr('checked', 'true');
    117         }
    118         //编辑修改
    119         function Edit() {
    120             $("#tdLeft").remove(); //删除秒杀时间td
    121             $("#tdSeckill").remove(); //删除秒杀时间td
    122             loadTypeID();
    123             url = '../ashx/GetSm_CaseInformation.ashx?types=ListEdit';
    124             var row = $('#dgCaseInfo').datagrid('getSelected');
    125             if (row) {
    126                 $('#dlg').dialog('open').dialog('setTitle', '修改');
    127                 $("#imageCaseUrl").attr("src", "../.." + $('#FilePath').val()); //设置<image id="imageCaseUrl">的url
    128                 editor.html(row["Describe"]);
    129                 if (row["IsSeckill"]==1)//如果该商品是秒杀状态 则:
    130                 {
    131                     $("#trSeckill").append(' <td id="tdLeft" class="tab_td_right" style="80px;">秒杀时间:</td><td id="tdSeckill" class="tab_td_left"><input id="SeckillDateBegin"  class="easyui-datetimebox" name="SeckillDateBegin" style="150px"> 至<input id="SeckillDateEnd"  class="easyui-datetimebox" name="SeckillDateEnd"  style="150px"></td>')
    132                     //初始化easyui日期控件
    133                     $('#SeckillDateBegin').datetimebox({
    134                         required: true,
    135                         showSeconds: false
    136                     });
    137                     $('#SeckillDateEnd').datetimebox({
    138                         required: true,
    139                         showSeconds: false
    140                     });
    141                 }
    142                 $('#form1').form('load', row);
    143                 $("#Flag ").val(row["Flag"]); //设置状态值
    144             }
    145         }
    146         //保存数据
    147         function Save() {
    148             editor.sync();
    149             $('#form1').form('submit', {
    150                 url: url,
    151                 onSubmit: function () {
    152                     return $(this).form('validate');
    153                 },
    154                 success: function (result) {
    155                     if (result <= 0) {
    156                         $.messager.show({
    157                             title: 'Error',
    158                             msg: result.errorMsg
    159                         });
    160                     } else {
    161                         $('#dlg').dialog('close');        // close the dialog
    162                         $('#dgCaseInfo').datagrid('reload');    // reload the user data
    163                     }
    164                 }
    165             });
    166         }
    167         //删除一条数据
    168         function destroy() {
    169             var row = $('#dgCaseInfo').datagrid('getSelected');
    170             if (row) {
    171                 $.messager.confirm('消息提示', '确定要删除吗?', function (r) {
    172                     if (r) {
    173 
    174                         $.post('../ashx/GetSm_CaseInformation.ashx?types=ListDel',
    175                                 { id: row.ID },
    176                                     function (result) {
    177                                         if (result > 0) {
    178                                             $('#dgCaseInfo').datagrid('reload');    // reload the user data
    179                                         } else {
    180                                             $.messager.show(
    181                                         {    // show error message
    182                                             title: 'Error',
    183                                             msg: result.errorMsg
    184                                         }
    185                                         );
    186                                         }
    187                                     }, 'json');
    188                     }
    189                 });
    190             }
    191         }
    192         //加载商品类型
    193         function loadTypeID() {
    194             $('#TypeID').combobox({
    195                 url: '../ashx/GetSm_CaseInformation.ashx?types=TypeIDLoad',
    196                 valueField: 'ID',
    197                 textField: 'DtyName'
    198             });
    199         }
    200         //点击图片后激发
    201         function ShowBigview(rowIndex) {
    202             var row = $("#dgCaseInfo").datagrid('getRows')[rowIndex];
    203             if (row["FilePath"].toString() != "") {
    204                 $.messager.alert('大图预览', '<img alt=""  src=../..' + row["FilePath"] + ' width="100px" height="100px" />');
    205             } else {
    206                 $.messager.alert('消息提示', '未设置标题图片!');
    207             }
    208         }
    209         //点击单选按钮 正常时激发
    210         function DisDate() {
    211             $("#tdLeft").remove(); //删除秒杀时间td
    212             $("#tdSeckill").remove(); //删除秒杀时间td
    213         }
    214         //点击单选按钮 秒杀时激发
    215         function HideDate() {
    216             $("#tdLeft").remove(); //删除秒杀时间td
    217             $("#tdSeckill").remove(); //删除秒杀时间td
    218             $("#trSeckill").append(' <td id="tdLeft" class="tab_td_right" style="80px;">秒杀时间:</td><td id="tdSeckill" class="tab_td_left"><input id="SeckillDateBegin"  class="easyui-datetimebox" name="SeckillDateBegin" style="150px"> 至<input id="SeckillDateEnd"  class="easyui-datetimebox" name="SeckillDateEnd"  style="150px"></td>')
    219             //初始化easyui日期控件
    220             $('#SeckillDateBegin').datetimebox({
    221                 required: true,
    222                 showSeconds: false
    223             });
    224             $('#SeckillDateEnd').datetimebox({
    225                 required: true,
    226                 showSeconds: false
    227             });  
    228         }
    229     </script>
    230   
    231 </head>
    232 <body>
    233     <table id="dgCaseInfo">
    234     </table>
    235     <div id="toolbar" style=" 100%">
    236         <div style="padding-top: 5px;  100%">
    237             <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"
    238                 onclick="Add()">添加</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit"
    239                     plain="true" onclick="Edit()">编辑</a> <a href="javascript:void(0)" class="easyui-linkbutton"
    240                         iconcls="icon-remove" plain="true" onclick="destroy()">删除</a>
    241         </div>
    242         产品名称:<input id="Names" name="Names" class="easyui-validatebox" type="text" />
    243         <a id="search" href="#" onclick="Search()" class="easyui-linkbutton" plain="true"
    244             data-options="iconCls:'icon-search'">搜索</a>
    245     </div>
    246     <div id="dlg" class="easyui-dialog" style="800px; height: 400px; padding: 10px;"
    247         closed="true" buttons="#dlg-buttons">
    248         <div class="ftitle">
    249             产品信息</div>
    250         <form id="form1" runat="server" method="post">
    251         <table id="table_edit" class="tab" style=" 98%; font-size: 12px; border: 1px #E1E1E1 solid" cellpadding="0"
    252             cellspacing="1">
    253             <tr class="tab_tr" style="display: none;">
    254                 <td colspan="4">
    255                     <input name="ID" class="easyui-validatebox" />
    256                     <input name="MonadID" class="easyui-validatebox" />
    257                 </td>
    258             </tr>
    259             <tr style="height: 26px;" class="tab_tr">
    260                 <td class="tab_td_right" style="80px;">
    261                     商品名称:
    262                 </td>
    263                 <td class="tab_td_left">
    264                     <input name="Name" class="easyui-validatebox" required="true" style="150px" />
    265                 </td>
    266                 <td class="tab_td_right" style="80px;">
    267                     商品类型:
    268                 </td>
    269                 <td class="tab_td_left">
    270                     <input id="TypeID" name="TypeID" style=" 200px" required="true" />
    271                 </td>
    272             </tr>
    273             <tr style="height: 26px; "  class="tab_tr">
    274                 <td class="tab_td_right" style="80px;">
    275                     商品价格:
    276                 </td>
    277                 <td class="tab_td_left">
    278                     <input name="Price" class="easyui-validatebox" required="true" style=" 150px" />
    279                 </td>
    280                 <td class="tab_td_right" style="80px;">
    281                     商品折扣:
    282                 </td>
    283                 <td class="tab_td_left">
    284                     <input id="Discount" name="Discount" style=" 200px" />
    285                 </td>
    286             </tr>
    287             <tr style="height: 26px; "  class="tab_tr">
    288                 <td class="tab_td_right" style="80px;">
    289                     库存数量:
    290                 </td>
    291                 <td class="tab_td_left">
    292                     <input id="InventoryNumber" name="InventoryNumber" style=" 150px" />
    293                 </td>
    294                 <td class="tab_td_right" style="80px;">
    295                     卖出件数:
    296                 </td>
    297                 <td class="tab_td_left">
    298                     <input id="SellNumber" name="SellNumber" style=" 200px" />
    299                 </td>
    300             </tr>
    301             <tr style="height: 26px; "  class="tab_tr">
    302                 <td class="tab_td_right" style="80px;">
    303&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 态:
    304                 </td>
    305                 <td class="tab_td_left">
    306                     上架<input name="Flag" type="radio" value="0" />&nbsp&nbsp&nbsp
    307                     下架<input name="Flag" type="radio" value="1" />
    308                 </td>
    309                 <td class="tab_td_right" style="80px;">
    310                    是否热销:
    311                 </td>
    312                 <td class="tab_td_left">
    313                     正常<input name="IsHotSell" type="radio" value="0" />&nbsp&nbsp&nbsp
    314                     热销<input name="IsHotSell" type="radio" value="1" />
    315                 </td>
    316             </tr>
    317             <tr style="height: 26px; "  class="tab_tr" id="trSeckill">
    318                 <td class="tab_td_right" style="80px;">
    319                     秒杀状态:
    320                 </td>
    321                 <td class="tab_td_left" >
    322                     正常<input name="IsSeckill" type="radio" value="0"  onclick="DisDate()"/>&nbsp&nbsp&nbsp
    323                     秒杀<input name="IsSeckill" type="radio" value="1"  onclick="HideDate()"/>
    324                 </td>
    325                 <%-- <td class="tab_td_left" >
    326                 <input id="SeckillDateBegin" disabled="disabled" class="easyui-datetimebox" name="SeckillDateBegin" data-options="required:true,showSeconds:false"  style="150px">  
    327 <input id="SeckillDateEnd" disabled="disabled" class="easyui-datetimebox" name="SeckillDateEnd" data-options="required:true,showSeconds:false"  style="150px"> 
    328                 </td>--%>
    329             </tr>
    330 
    331             <tr style="height: 26px; "  class="tab_tr">
    332                 <td class="tab_td_right" style="80px;">
    333                     产品照片:
    334                 </td>
    335                 <td class="tab_td_left" colspan="3">
    336                     <div>
    337                         <asp:TextBox ID="FilePath" name="FilePath" runat="server" CssClass="txtInput normal left"
    338                             MaxLength="255"></asp:TextBox>
    339                         <a href="javascript:;" class="files">
    340                             <input type="file" id="FileUpload" name="FileUpload" onchange="Upload('SingleFile', 'FilePath', 'FileUpload');" /></a>
    341                         <span class="uploading">正在上传,请稍候...</span>
    342                     </div>
    343                 </td>
    344             </tr>
    345             <tr style="height: 26px;"  class="tab_tr">
    346                 <td class="tab_td_right" style="80px;">
    347&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 述:
    348                 </td>
    349                 <td class="tab_td_left" colspan="3">
    350                     <textarea id="Describe" name="Describe" style=" 99%; height: 100px; visibility: hidden;"
    351                         runat="server"></textarea>
    352                 </td>
    353             </tr>
    354         </table>
    355         </form>
    356     </div>
    357     <div id="dlg-buttons">
    358         <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="Save()">
    359             保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"
    360                 onclick="javascript:$('#dlg').dialog('close')">取消</a>
    361     </div>
    362 </body>
  • 相关阅读:
    Eclipse 添加行号
    http中 get方法 传送中文参数乱码解决办法
    第一章 java 语言概述
    Python学习
    Python学习
    Python学习
    Python学习
    Python学习
    Python学习
    Python学习
  • 原文地址:https://www.cnblogs.com/jiebo/p/3495615.html
Copyright © 2011-2022 走看看