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 状 态: 304 </td> 305 <td class="tab_td_left"> 306 上架<input name="Flag" type="radio" value="0" />    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" />    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()"/>    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 描 述: 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>