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 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
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
PHP入门学习笔记之一
2010/10/12 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
django之自定义软删除Model的方法
2019/08/14 Python
python实现3D地图可视化
2020/03/25 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
异步传递消息系统的作用
2016/05/01 面试题
兼职业务员岗位职责
2014/01/01 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang