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                 width: '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: '商品名称', width: 200, align: 'left' },
 71                       { field: 'Add_Time', title: '添加时间', width: 100, align: 'left' },
 72                       { field: 'Describe', title: '描述', width: 100, align: 'left', hidden: true },
 73                       { field: 'FilePath', title: '案例照片', width: 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: '状态', width: 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: '商品类型', width: 100, align: 'left', hidden: true },
 92                       { field: 'MonadID', title: '企业名称', width: 100, align: 'left', hidden: true },
 93                       { field: 'MonadName', title: '企业名称', width: 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="width:80px;">秒杀时间:</td><td id="tdSeckill" class="tab_td_left"><input id="SeckillDateBegin"  class="easyui-datetimebox" name="SeckillDateBegin" style="width:150px"> 至<input id="SeckillDateEnd"  class="easyui-datetimebox" name="SeckillDateEnd"  style="width: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="width:80px;">秒杀时间:</td><td id="tdSeckill" class="tab_td_left"><input id="SeckillDateBegin"  class="easyui-datetimebox" name="SeckillDateBegin" style="width:150px"> 至<input id="SeckillDateEnd"  class="easyui-datetimebox" name="SeckillDateEnd"  style="width: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="width: 100%">
236         <div style="padding-top: 5px; width: 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="width: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="width: 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="width:80px;">
261                     商品名称:
262                 </td>
263                 <td class="tab_td_left">
264                     <input name="Name" class="easyui-validatebox" required="true" style="width:150px" />
265                 </td>
266                 <td class="tab_td_right" style="width:80px;">
267                     商品类型:
268                 </td>
269                 <td class="tab_td_left">
270                     <input id="TypeID" name="TypeID" style="width: 200px" required="true" />
271                 </td>
272             </tr>
273             <tr style="height: 26px; "  class="tab_tr">
274                 <td class="tab_td_right" style="width:80px;">
275                     商品价格:
276                 </td>
277                 <td class="tab_td_left">
278                     <input name="Price" class="easyui-validatebox" required="true" style="width: 150px" />
279                 </td>
280                 <td class="tab_td_right" style="width:80px;">
281                     商品折扣:
282                 </td>
283                 <td class="tab_td_left">
284                     <input id="Discount" name="Discount" style="width: 200px" />
285                 </td>
286             </tr>
287             <tr style="height: 26px; "  class="tab_tr">
288                 <td class="tab_td_right" style="width:80px;">
289                     库存数量:
290                 </td>
291                 <td class="tab_td_left">
292                     <input id="InventoryNumber" name="InventoryNumber" style="width: 150px" />
293                 </td>
294                 <td class="tab_td_right" style="width:80px;">
295                     卖出件数:
296                 </td>
297                 <td class="tab_td_left">
298                     <input id="SellNumber" name="SellNumber" style="width: 200px" />
299                 </td>
300             </tr>
301             <tr style="height: 26px; "  class="tab_tr">
302                 <td class="tab_td_right" style="width: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="width: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="width: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="width:150px">  
327 <input id="SeckillDateEnd" disabled="disabled" class="easyui-datetimebox" name="SeckillDateEnd" data-options="required:true,showSeconds:false"  style="width:150px"> 
328                 </td>--%>
329             </tr>
330 
331             <tr style="height: 26px; "  class="tab_tr">
332                 <td class="tab_td_right" style="width: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="width: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="width: 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>

 

posted @ 2013-12-28 18:05  曹杰博  阅读(1374)  评论(0编辑  收藏  举报