jquery动态添加删除(tr/td)


Posted in Javascript onFebruary 09, 2015

代码很简单,实现的功能也很简单,有需要的小伙伴参考下吧。

<head runat="server">

    <title></title>

    <!--easyui -->

    <link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/icon.css" />

    <link rel="stylesheet" type="text/css" href="../../script/easy_ui/themes/demo.css" />

    <link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/default/easyui.css" />

    <link href="../../css/function.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="../../script/jquery-1.8.2.js"></script>

    <script type="text/javascript" src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_TW.js"></script>

    <script type="text/javascript" src="../../script/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>

    <!--上传控件 -->

    <link href="../../css/images/style.css" rel="stylesheet" type="text/css" />

    <script type='text/javascript' src="../../script/swfupload/swfupload.js"></script>

    <script type='text/javascript' src="../../script/swfupload/swfupload.queue.js"></script>

    <script type="text/javascript" src="../../script/swfupload/swfupload.handlers.js"></script>

    <script src="../../script/jquery.form.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../script/function.js"></script>

    <!--编辑器 -->

    <script type="text/javascript" charset="utf-8" src="../../editor/kindeditor-min.js"></script>

    <script type="text/javascript" charset="utf-8" src="../../editor/lang/zh_CN.js"></script>

    <script type="text/javascript">

        /* jquery easyui 操作*/

        window.onload = function () {

            InitGird();

        }

        //加载编辑器

        var editor;

        $(function () {

            editor = KindEditor.create('textarea[name="Describe"]', {

                resizeType: 1,

                uploadJson: '../ashx/upload_ajax.ashx?action=EditorFile&IsWater=1',

                fileManagerJson: '../ashx/upload_ajax.ashx?action=ManagerFile',

                allowFileManager: true

            });

        });

        //初始化上传控件

        $(function () {

            InitSWFUpload("../ashx/upload_ajax.ashx", "Filedata", "1024 KB", "../../script/swfupload/swfupload.swf", 1, 1);

        });

        //搜索

        function Search() {

            $('#dgCaseInfo').datagrid('load', {

                action: "loadListPage",

                Names: $("#Names").val()

            });

        }

        //初始化表格

        function InitGird() {

            $("#dgCaseInfo").datagrid({

                autoRowHeight: false,

                loadMsg: '正在努力加载中...',

                url: '../ashx/GetSm_CaseInformation.ashx?types=loadListPage', //请求数据的页面

                sortName: 'ID', //排序字段

                idField: 'ID', //标识字段,主键

                iconCls: '', //标题左边的图片

                singleSelect: true,

                width: '100%', //宽度

                height: 'auto', //高度

                nowrap: true, //是否换行,True 就会把数据显示在一行里

                striped: true, //True 奇偶行使用不同背景色

                collapsible: false, //可折叠

                sortOrder: 'desc', //排序类型

                remoteSort: true, //定义是否从服务器给数据排序

                fit: true,

                singleSelect: true, //是否只允许选择一行

                selectOnCheck: false, //单击复选框不会选中行

                fitColumns: true, //列自动缩放

                columns: [[

                       { field: 'Name', title: '商品名称', width: 200, align: 'left' },

                      { field: 'Add_Time', title: '添加时间', width: 100, align: 'left' },

                      { field: 'Describe', title: '描述', width: 100, align: 'left', hidden: true },

                      { field: 'FilePath', title: '案例照片', width: 100, align: 'left',

                          formatter: function (value, row, index) {

                              if (row.FilePath != "") {

                                  return '<a href=javascript:ShowBigview(' + index + ')><img alt="照片" src="../..' + row.FilePath + '"width="100px" height="25px"/></a>'

                              } else {

                                  return "暂无图片"

                              }

                          }

                      },

                      { field: 'Flag', title: '状态', width: 100, align: 'left',

                          formatter: function (value, row, index) {

                              if (row.Flag == 0) {

                                  return "上架";

                              } else {

                                  return "下架";

                              }

                          }

                      },

                      { field: 'TypeID', title: '商品类型', width: 100, align: 'left', hidden: true },

                      { field: 'MonadID', title: '企业名称', width: 100, align: 'left', hidden: true },

                      { field: 'MonadName', title: '企业名称', width: 100, align: 'left', hidden: true }

                      ]],

                toolbar: "#toolbar",

                queryParams: { "action": "query" },

                pagination: true, //是否开启分页

                pagePosition: 'bottom', //分页位置

                pageNumber: 1, //默认索引页

                pageSize: 10, //默认一页数据条数

                onDblClickRow: function (rowIndex, rowData) {//行双击事件

                    Edit();

                }

            })

        }

        var url;

        //添加一条数据

        function Add() {

            $("#tdLeft").remove();//删除秒杀时间td

            $("#tdSeckill").remove(); //删除秒杀时间td

            loadTypeID();

            editor.html("");

            $('#dlg').dialog('open').dialog('setTitle', '添加');

            $('#form1').form('clear');

            url = '../ashx/GetSm_CaseInformation.ashx?types=ListAdd';

            $("input[name='Flag']").eq(0).attr('checked', 'true');

        }

        //编辑修改

        function Edit() {

            $("#tdLeft").remove(); //删除秒杀时间td

            $("#tdSeckill").remove(); //删除秒杀时间td

            loadTypeID();

            url = '../ashx/GetSm_CaseInformation.ashx?types=ListEdit';

            var row = $('#dgCaseInfo').datagrid('getSelected');

            if (row) {

                $('#dlg').dialog('open').dialog('setTitle', '修改');

                $("#imageCaseUrl").attr("src", "../.." + $('#FilePath').val()); //设置<image id="imageCaseUrl">的url

                editor.html(row["Describe"]);

                if (row["IsSeckill"]==1)//如果该商品是秒杀状态 则:

                {

                    $("#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>')

                    //初始化easyui日期控件

                    $('#SeckillDateBegin').datetimebox({

                        required: true,

                        showSeconds: false

                    });

                    $('#SeckillDateEnd').datetimebox({

                        required: true,

                        showSeconds: false

                    });

                }

                $('#form1').form('load', row);

                $("#Flag ").val(row["Flag"]); //设置状态值

            }

        }

        //保存数据

        function Save() {

            editor.sync();

            $('#form1').form('submit', {

                url: url,

                onSubmit: function () {

                    return $(this).form('validate');

                },

                success: function (result) {

                    if (result <= 0) {

                        $.messager.show({

                            title: 'Error',

                            msg: result.errorMsg

                        });

                    } else {

                        $('#dlg').dialog('close');        // close the dialog

                        $('#dgCaseInfo').datagrid('reload');    // reload the user data

                    }

                }

            });

        }

        //删除一条数据

        function destroy() {

            var row = $('#dgCaseInfo').datagrid('getSelected');

            if (row) {

                $.messager.confirm('消息提示', '确定要删除吗?', function (r) {

                    if (r) {

                        $.post('../ashx/GetSm_CaseInformation.ashx?types=ListDel',

                                { id: row.ID },

                                    function (result) {

                                        if (result > 0) {

                                            $('#dgCaseInfo').datagrid('reload');    // reload the user data

                                        } else {

                                            $.messager.show(

                                        {    // show error message

                                            title: 'Error',

                                            msg: result.errorMsg

                                        }

                                        );

                                        }

                                    }, 'json');

                    }

                });

            }

        }

        //加载商品类型

        function loadTypeID() {

            $('#TypeID').combobox({

                url: '../ashx/GetSm_CaseInformation.ashx?types=TypeIDLoad',

                valueField: 'ID',

                textField: 'DtyName'

            });

        }

        //点击图片后激发

        function ShowBigview(rowIndex) {

            var row = $("#dgCaseInfo").datagrid('getRows')[rowIndex];

            if (row["FilePath"].toString() != "") {

                $.messager.alert('大图预览', '<img alt=""  src=../..' + row["FilePath"] + ' width="100px" height="100px" />');

            } else {

                $.messager.alert('消息提示', '未设置标题图片!');

            }

        }

        //点击单选按钮 正常时激发

        function DisDate() {

            $("#tdLeft").remove(); //删除秒杀时间td

            $("#tdSeckill").remove(); //删除秒杀时间td

        }

        //点击单选按钮 秒杀时激发

        function HideDate() {

            $("#tdLeft").remove(); //删除秒杀时间td

            $("#tdSeckill").remove(); //删除秒杀时间td

            $("#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>')

            //初始化easyui日期控件

            $('#SeckillDateBegin').datetimebox({

                required: true,

                showSeconds: false

            });

            $('#SeckillDateEnd').datetimebox({

                required: true,

                showSeconds: false

            });  

        }

    </script>

</head>

<body>

    <table id="dgCaseInfo">

    </table>

    <div id="toolbar" style="width: 100%">

        <div style="padding-top: 5px; width: 100%">

            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"

                onclick="Add()">添加</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit"

                    plain="true" onclick="Edit()">编辑</a> <a href="javascript:void(0)" class="easyui-linkbutton"

                        iconcls="icon-remove" plain="true" onclick="destroy()">删除</a>

        </div>

        产品名称:<input id="Names" name="Names" class="easyui-validatebox" type="text" />

        <a id="search" href="#" onclick="Search()" class="easyui-linkbutton" plain="true"

            data-options="iconCls:'icon-search'">搜索</a>

    </div>

    <div id="dlg" class="easyui-dialog" style="width:800px; height: 400px; padding: 10px;"

        closed="true" buttons="#dlg-buttons">

        <div class="ftitle">

            产品信息</div>

        <form id="form1" runat="server" method="post">

        <table id="table_edit" class="tab" style="width: 98%; font-size: 12px; border: 1px #E1E1E1 solid" cellpadding="0"

            cellspacing="1">

            <tr class="tab_tr" style="display: none;">

                <td colspan="4">

                    <input name="ID" class="easyui-validatebox" />

                    <input name="MonadID" class="easyui-validatebox" />

                </td>

            </tr>

            <tr style="height: 26px;" class="tab_tr">

                <td class="tab_td_right" style="width:80px;">

                    商品名称:

                </td>

                <td class="tab_td_left">

                    <input name="Name" class="easyui-validatebox" required="true" style="width:150px" />

                </td>

                <td class="tab_td_right" style="width:80px;">

                    商品类型:

                </td>

                <td class="tab_td_left">

                    <input id="TypeID" name="TypeID" style="width: 200px" required="true" />

                </td>

            </tr>

            <tr style="height: 26px; "  class="tab_tr">

                <td class="tab_td_right" style="width:80px;">

                    商品价格:

                </td>

                <td class="tab_td_left">

                    <input name="Price" class="easyui-validatebox" required="true" style="width: 150px" />

                </td>

                <td class="tab_td_right" style="width:80px;">

                    商品折扣:

                </td>

                <td class="tab_td_left">

                    <input id="Discount" name="Discount" style="width: 200px" />

                </td>

            </tr>

            <tr style="height: 26px; "  class="tab_tr">

                <td class="tab_td_right" style="width:80px;">

                    库存数量:

                </td>

                <td class="tab_td_left">

                    <input id="InventoryNumber" name="InventoryNumber" style="width: 150px" />

                </td>

                <td class="tab_td_right" style="width:80px;">

                    卖出件数:

                </td>

                <td class="tab_td_left">

                    <input id="SellNumber" name="SellNumber" style="width: 200px" />

                </td>

            </tr>

            <tr style="height: 26px; "  class="tab_tr">

                <td class="tab_td_right" style="width:80px;">

                    状       态:

                </td>

                <td class="tab_td_left">

                    上架<input name="Flag" type="radio" value="0" />   

                    下架<input name="Flag" type="radio" value="1" />

                </td>

                <td class="tab_td_right" style="width:80px;">

                   是否热销:

                </td>

                <td class="tab_td_left">

                    正常<input name="IsHotSell" type="radio" value="0" />   

                    热销<input name="IsHotSell" type="radio" value="1" />

                </td>

            </tr>

            <tr style="height: 26px; "  class="tab_tr" id="trSeckill">

                <td class="tab_td_right" style="width:80px;">

                    秒杀状态:

                </td>

                <td class="tab_td_left" >

                    正常<input name="IsSeckill" type="radio" value="0"  onclick="DisDate()"/>   

                    秒杀<input name="IsSeckill" type="radio" value="1"  onclick="HideDate()"/>

                </td>

                <%-- <td class="tab_td_left" >

                <input id="SeckillDateBegin" disabled="disabled" class="easyui-datetimebox" name="SeckillDateBegin" data-options="required:true,showSeconds:false"  style="width:150px">  

               至<input id="SeckillDateEnd" disabled="disabled" class="easyui-datetimebox" name="SeckillDateEnd" data-options="required:true,showSeconds:false"  style="width:150px"> 

                </td>--%>

            </tr>

            <tr style="height: 26px; "  class="tab_tr">

                <td class="tab_td_right" style="width:80px;">

                    产品照片:

                </td>

                <td class="tab_td_left" colspan="3">

                    <div>

                        <asp:TextBox ID="FilePath" name="FilePath" runat="server" CssClass="txtInput normal left"

                            MaxLength="255"></asp:TextBox>

                        <a href="javascript:;" class="files">

                            <input type="file" id="FileUpload" name="FileUpload" onchange="Upload('SingleFile', 'FilePath', 'FileUpload');" /></a>

                        <span class="uploading">正在上传,请稍候...</span>

                    </div>

                </td>

            </tr>

            <tr style="height: 26px;"  class="tab_tr">

                <td class="tab_td_right" style="width:80px;">

                    描       述:

                </td>

                <td class="tab_td_left" colspan="3">

                    <textarea id="Describe" name="Describe" style="width: 99%; height: 100px; visibility: hidden;"

                        runat="server"></textarea>

                </td>

            </tr>

        </table>

        </form>

    </div>

    <div id="dlg-buttons">

        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="Save()">

            保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"

                onclick="javascript:$('#dlg').dialog('close')">取消</a>

    </div>

</body>

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery对象[0]是什么含义?
Jul 31 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
javascript模拟map输出与去除重复项的方法
Feb 09 #Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 #Javascript
jquery动态改变div宽度和高度
Feb 09 #Javascript
angularJS结合canvas画图例子
Feb 09 #Javascript
jquery实现上下左右滑动的方法
Feb 09 #Javascript
js实现上传图片预览的方法
Feb 09 #Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 #Javascript
You might like
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python套接字流重定向实例汇总
2016/03/03 Python
微信小程序python用户认证的实现
2019/07/29 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
信息合作协议书
2014/10/09 职场文书
检讨书格式
2015/01/23 职场文书
专家推荐信怎么写
2015/03/25 职场文书
同事打架检讨书
2015/05/06 职场文书
债务追讨律师函
2015/06/24 职场文书
Django migrate报错的解决方案
2021/05/20 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python