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 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
JS定义类的六种方式详解
May 12 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 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
Terran剧情介绍
2020/03/14 星际争霸
56.com视频采集接口程序(PHP)
2007/09/22 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
python实现kNN算法
2017/12/20 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
地道战观后感2000字
2015/06/04 职场文书
2015暑假假期总结
2015/07/13 职场文书
浅谈python数据类型及其操作
2021/05/25 Python