lazzybaby 2010-03-31 07:16
浏览 266
已采纳

请教个jquery的问题,本人新手,怕描述不清,看图说话。


  上图是页面的部分效果,因为每次输入的的数据很多字段是重复的, 偶尔需要修改。

  我想做到得效果是在红圈处增加一个按钮,每点击下,在下面的表单初始化一新行,数据为该行上一行的数据。

代码如下:

<html >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <!-- 引入JSCal2-1.7 -->
        <script language="JavaScript" src="/myproject/plugins/JSCal2-1.7/src/js/jscal2.js"></script> 
        <script language="JavaScript" src="/myproject/plugins/JSCal2-1.7/src/js/lang/cn.js" charset="utf-8"></script> 
        <link rel="stylesheet" type="text/css" href="/myproject/plugins/JSCal2-1.7/src/css/jscal2.css" />
        
        <script type="text/javascript" src="/myproject/plugins/EventUtil/EventUtil.js"></script>
    
        <link rel="stylesheet" href="/myproject/plugins/slick.grid/css/slick.grid.css" type="text/css" media="screen" charset="gb2312" /> 
        <link rel="stylesheet" href="/myproject/plugins/slick.grid/css/examples.css" type="text/css" media="screen" charset="gb2312" /> 
        <link rel="stylesheet" href="/myproject/plugins/jquery-message/jquery.message.css" type="text/css" media="screen" charset="gb2312" />
        
        <!-- 引入jQuery -->
        <script language="JavaScript" src="/myproject/plugins/jQuery/js/jquery-1.3.2.min.js"></script> 
        
        <!-- 引入JSON -->
        <script language="JavaScript" src="/myproject/plugins/json/json2.js"></script> 
        
        <!-- 引入Slick.Grid -->
        <script language="JavaScript" src="/myproject/plugins/slick.grid/js/firebugx.js"></script> 
        <script language="JavaScript" src="/myproject/plugins/slick.grid/js/jquery.getScrollbarWidth.js"></script> 
        <script language="JavaScript" src="/myproject/plugins/slick.grid/js/jquery.rule-1.0.1-min.js"></script> 
            
        <script language="JavaScript" src="slick.editors.js"></script> 
        <script language="JavaScript" src="/myproject/plugins/slick.grid/js/slick.grid.js"></script> 
        <script language="JavaScript" src="/myproject/plugins/slick.grid/js/slick.globaleditorlock.js"></script>
        <script language="JavaScript" src="/myproject/plugins/validator/validator.js"></script>
        
        <!-- 引入jquery-message -->
        <script src="/myproject/plugins/jquery-message/jquery.message.js" type="text/javascript"></script>
        <style>
        #result {
            background: white;
            outline: 1px;
            border: 1px solid gray;
            width:99%;
            height:400px;
        }
        </style>
        <script>
            ///////////////////////////////////////////////////////////////////////////
            //////////////////////////////全局信息定义/////////////////////////////////
            //数据状态
            var RAW = 0;    //原始
            var NEW = 1;    //新增
            var MODIFIED = 2; //被修改
            var DELETED = 3;    //删除

            var G_PrevRow = -1; //前一工作行
            var G_LastRow = -1; //最后提交的行
            var G_IsModified = false;//文档状态
            var G_IsReady = true; //工作行是否处理就绪 
            var G_Current = new Date();//当前时间       
            var G_GridData = [];//表格基础数据        
            var G_DeletedRows = [];//需要服务器提交行ID列表           
            var G_DeleteItemRowNumbers = [];//需要服务器提交行序号列表
            
            var G_PositionList = [];
            <#if position?exists>
            <#list position as item>
            G_PositionList[G_PositionList.length]="${item.position}";
            </#list>
            </#if>
                            
            var G_Grid;
            var G_Columns = [
                {id:"select", name:"<center><INPUT id='selectAll' type='checkbox' value='true' class='editor-checkbox' hideFocus></center>", width:30, formatter:SelectCellFormatter},
                {id:"persName", name:"姓名", field:"persName", editor:TextCellEditor, validator : requiredFieldValidator},
                {id:"sex", name:"性别", field:"sex", editor:SexSelectCellEditor, validator : requiredFieldValidator},
                {id:"nation", name:"民族", field:"nation", editor:TextCellEditor},
                {id:"birthPlace", name:"籍贯", field:"birthPlace", editor:TextCellEditor},
                {id:"birthday", name:"出生年月", field:"birthday", width:120,editor:DateCellEditor},
                {id:"idCard", name:"工种", field:"idCard", editor:PositionSelectCellEditor,  validator : requiredFieldValidator},
                {id:"workTime", name:"参加工作时间", field:"workTime", width:120,editor:DateCellEditor, validator : requiredFieldValidator},
                {id:"position", name:"职位", field:"position", editor:TextCellEditor},
                {id:"joinOrg", name:"所在部门", field:"joinOrg", editor:TextCellEditor, validator : requiredFieldValidator},
                {id:"joinTime", name:"加入本部门时间", field:"joinTime", width:120,editor:DateCellEditor},
                {id:"political", name:"政治面貌", field:"political", editor:TextCellEditor},
                {id:"education", name:"文化程度", field:"education", editor:TextCellEditor},
                {id:"techHera", name:"技术等级", field:"techHera",  editor:TextCellEditor}, 
                {id:"address", name:"住址", field:"address", editor:TextCellEditor},
                {id:"tel", name:"联系电话", field:"tel", editor:TextCellEditor}
            ];
     
            var G_Options = {
                editable: true,
                enableAddRow: true,
                enableCellNavigation: true,
                asyncEditorLoading: false
            };  
            
            //////////////////////////////全局信息定义结束/////////////////////////////////
            ///////////////////////////////////////////////////////////////////////////
            
            //文档加载完成
            $(function()
            {
                $("#query").click(function(){
                    if(G_IsModified)
                    {
                        if(!confirm("数据已经修改,要放弃修改吗?"))
                        {
                            return;
                        }
                    }
                    initData();
                    query();
                });
                init();
                
                $("#view").click(function(){
                        view();
                    });
                    
                $("#account").click(function(){
                    account();
                });
                
                $("#save").click(function(){
                    if(validateCurrentRow())
                    {
                        //alert(JSON.stringify(G_GridData));
                        //commitDelete(G_DeletedRows);
                        //commitUpdate(G_GridData);
                        //commitAdd(G_GridData);
                    }
                });
                        
                //删除所选
                $("#delete").click(function(){
                    if(validateCurrentRow())
                    {
                        //全部待删除记录行序号列表
                        var deleteItems = [];
                        
                        $(":input[name='item'][checked='true']").each(function(){
                            deleteItems[deleteItems.length] = $(this).attr("id");
                        });
                        
                        //排序待删除行序号
                        deleteItems.sort(sortNumber);
                        for(var i = deleteItems.length; i >0; i--)
                        {
                            var rowNumber = deleteItems[i - 1];
                            var row = G_GridData[rowNumber];
                            if(NEW != row.flag)
                            {
                                G_DeletedRows[G_DeletedRows.length] = row.persId;
                                G_DeleteItemRowNumbers[G_DeleteItemRowNumbers.length] = rowNumber;
                            }
                            else
                            {
                                G_Grid.removeRow(rowNumber);
                                G_GridData.splice(rowNumber, 1);
                            }
                        }
                        
                        //向服务器提交删除请求
                        $.post("/myproject/cm/zyn/cm_perInfo/deleteBatch.action", 
                            {
                                "queryCondition.items": JSON.stringify(G_DeletedRows)
                            }, 
                            function(data){
                                G_DeletedRows.splice(0, G_DeletedRows.length);
                                if(!data.result)
                                {
                                    $().message(data.message + "<a href='javascript:$().message(data.detail)'>\>\></a>");
                                }
                                else
                                {
                                    $().message(data.message + "<a href='javascript:$().message(data.detail)'>\>\></a>");
                                    //服务器响应删除成功后,删除表格中的实际数据
                                    for(var i = 0; i < G_DeleteItemRowNumbers.length; i++)
                                    {
                                        G_Grid.removeRow(G_DeleteItemRowNumbers[i]);
                                        G_GridData.splice(G_DeleteItemRowNumbers[i], 1);
                                    }
                                }
                                G_DeleteItemRowNumbers.splice(0, G_DeleteItemRowNumbers.length);
                                G_Grid.resizeCanvas();
                                G_Grid.render();                            
                            },
                            "json"
                        );
                        G_Grid.resizeCanvas();
                        G_Grid.render();
                    }
                });
            })
            
            
            //初始化全局控制数据
            function initData()
            {
                G_PrevRow = -1;
                G_IsModified = false;
                G_Current = new Date()
                G_GridData = [];
                G_DeletedRows = [];
                G_DeleteItemRowNumbers = [];
            }
            
            //初始化页面
            function init()
            {
                query();
            }
            
            //批量提交更新记录
            function commitUpdate(items)
            {
                var updateList = [];
                for(var i = 0; i < items.length; i++)
                {
                    if(items[i].flag == MODIFIED)
                    {
                        updateList[updateList.length] = items[i];
                    }
                }

                if(updateList.length > 0)
                {
                    $.post("/myproject/cm/zyn/cm_perInfo/updateBatch.action", 
                        {
                            "queryCondition.items": encodeURIComponent(JSON.stringify(updateList))
                        }, 
                        function(data){
                            if(!data.result)
                            {
                                $().message(data.message.message);
                            }
                            else
                            {
                                items.splice(0, items.length);
                            }
                        },
                        "json"
                    );
                }
            }
            
            //批量提交新增记录
            function commitAdd(items)
            {
                var newList = [];
                for(var i = 0; i < items.length; i++)
                {
                    if(items[i].flag == NEW)
                    {
                        newList[newList.length] = items[i];
                    }
                }
                alert(JSON.stringify(newList));
                
                if(newList.length > 0)
                {
                    $.post("/myproject/cm/zyn/cm_perInfo/addBatch.action", 
                        {
                            "queryCondition.items": encodeURIComponent(JSON.stringify(newList))
                        }, 
                        function(data){
                            if(!data.result)
                            {
                                alert(data.message);
                            }
                            else
                            {
                                items.splice(0, items.length);
                            }
                        },
                        "json"
                    );
                }
            }
            
            //提交删除操作
            function commitDelete(items)
            {
                $.post("/myproject/cm/zyn/cm_perInfo/deleteBatch.action", 
                    {
                        "queryCondition.items": JSON.stringify(items)
                    }, 
                    function(data){
                        if(!data.result)
                        {
                            alert(data.message);
                        }
                        else
                        {
                            items.splice(0, items.length);
                        }
                    },
                    "json"
                );
            }
            
            //按照当前条件查询
            function query()
            {
                $.post("/myproject/cm/zyn/cm_perInfo/searchAllPer.action", 
                    {
                        "queryCondition.page": 1,
                        "queryCondition.startTime": $("#startTime").val(),
                        "queryCondition.endTime": $("#endTime").val()
                    }, 
                    function(data){
                        G_GridData = data;
                        initDataState(G_GridData);
                        if(G_Grid)G_Grid.destroy();
                        G_Grid = new SlickGrid($("#result"), G_GridData, G_Columns, G_Options);
                        G_Grid.onValidationError = function(elem, validationResults, row, cell, cellInfo) {
                            $().message(validationResults.msg);
                        }
                        
                        //新增一行事件处理
                        G_Grid.onAddNewRow = function(cellInfo, value) {
                        if(G_IsReady)
                            {
                            G_IsModified = true;
                            var item = {persId : "-1",  flag : NEW,
                                        persName : "", sex : "", nation : "", birthPlace : "", birthday : formatDate(G_Current),
                                        idCard : "", workTime : formatDate(G_Current), position : "", joinOrg : "", 
                                        joinTime : formatDate(G_Current),political : "", education : "", 
                                        techHera : "", address : "", tel : ""
                                        };
                            item[cellInfo.field] = value;
                            data[data.length] = item;
                            
                            G_Grid.resizeCanvas();
                            G_Grid.render();
                            G_Grid.updateRow(data.length-1);
                        }
                        }
                        
                        //工作行变化事件处理
                        G_Grid.onSelectedRowsChanged = function(){
                            G_IsReady = false;//工作行处理开始
                            currentRow = G_Grid.getSelectedRows();
                            if(G_PrevRow != -1 && G_GridData[G_PrevRow] && G_PrevRow != currentRow[0])
                            {
                                if(validateRow(G_Grid, G_PrevRow, G_GridData[G_PrevRow], G_Columns))
                                {
                                    G_IsReady = true;
                                    saveLastRow();
                                    G_PrevRow = currentRow;
                                }
                            }
                            else
                            {
                                G_IsReady = true;
                                G_PrevRow = currentRow;
                            }
                        }
                        
                        //全部选择/取消
                        $("#selectAll").click(function(){
                            var state = $(this).attr("checked");
                            $("input[name='item']").each(function(){
                                $(this).attr("checked", state);
                            });
                        });
                    },
                    "json"
                );
            }
            
            //保存最近一行
            function saveLastRow()
            {
                G_LastRow = G_PrevRow;
                var row = G_GridData[G_PrevRow];
                if(row)
                {
                    switch(row.flag)
                    {
                    case NEW:
                        $.post("/myproject/cm/zyn/cm_perInfo/add.action", 
                            {
                                "queryCondition.items": encodeURIComponent(JSON.stringify(row))
                            }, 
                            function(data){
                                G_IsModified = false;
                                $().message(data.message);
                                if(data.result)
                                {
                                    G_GridData[G_LastRow].persId = data.detail;
                                    G_GridData[G_LastRow].flag = RAW;
                                }
                            },
                            "json"
                        );
                        break;
                    case MODIFIED:
                        $.post("/myproject/cm/zyn/cm_perInfo/update.action", 
                            {
                                "queryCondition.items": encodeURIComponent(JSON.stringify(row))
                            }, 
                            function(data){
                                G_IsModified = false;
                                if(!data.result)
                                {
                                    $().message(data.message);
                                }
                                else
                                {
                                    $().message(data.message + "ddf" +  "<a href='javascript:$().message(data.detail)'>xx</a>");
                                    G_GridData[G_LastRow].flag = RAW;
                                }
                            },
                            "json"
                        );
                        break;
                    default:
                        break;
                    }
                }
            }
            
            //为按钮校验当前行
            function validateCurrentRow()
            {
                var result = true;
                G_Grid.commitCurrentEdit();
                if(!validateRow(G_Grid, G_PrevRow, G_GridData[G_PrevRow], G_Columns))
                {
                    result = false;
                }
                return result;
            }
            
            //对row行进行有效性检验,失败后定位到失败cell
            function validateRow(grid, rowNumber, row, columnDef)
            {
                var result = true;
                if(columnDef && rowNumber > -1)
                {
                    for(var i = 0; i < columnDef.length; i++)
                    {
                        if(columnDef[i].validator && columnDef[i].field)
                        {
                            var validationResults = columnDef[i].validator(row[columnDef[i].field]);
                            if(!validationResults.valid) 
                            {
                                var currentCellNode = grid.gotoCell(rowNumber, i);
                                $(currentCellNode).addClass("invalid");
                                if (grid.onValidationError)
                                    grid.onValidationError(currentCellNode, validationResults, rowNumber, i, columnDef[i]);
                            
                                result = false;
                                break;
                            }
                        }
                    }
                }
                return result;
            }
            
            function sortNumber(a, b)
            {
                return a - b
            }
            
            function initDataState(data)
            {
                for(var i = 0; i < data.length; i++)
                {
                    data[i]["flag"] = RAW;
                }
            }
            
            //获取当前日期所处报表段的起始日期
            function generateStartTime(current)
            {
                var year = current.getYear();
                year = (year < 1900) ? (1900 + year) : year;
                var month = current.getMonth() + 1;
                var day = 0;
                var segment = (current.getDate() - 1) / 5;
                segment = segment > 5 ? 5 : Math.floor(segment);
                day = segment * 5 + 1;
                return year + "-" + month + "-" + day;
            }
            
            //获取当前日期所处报表段的结束日期
            function generateEndTime(current)
            {
                var year = current.getYear();
                year = (year < 1900) ? (1900 + year) : year;
                var month = current.getMonth() + 1;
                var day = "";
                
                var segment = (current.getDate() - 1) / 5;
                segment = segment > 5 ? 5 : Math.floor(segment);
                day = segment * 5 + 5;
                return year + "-" + month + "-" + day;
            }
            
            //生成YY-MM-DD格式的日期字符串
            function formatDate(date)
            {
                var year = date.getYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                return year + "-" + month + "-" + day;
            }
            
            function  view(){
             window.self.location = "goSearch.action";
            }
            
            function  account(){
             window.self.location = "goAccountPer.action";
            }
        ///////////////////////检验函数////////////////////////////////////////////////
            function requiredFieldValidator(value){
                return isEmpty(value) ? {valid:false, msg:"不能为空"} : {valid:true, msg:null};
            }       
        </script> 
    </head>
    <body>
        <#if output?exists>
        <form id="search">
         <div class="title" align="center">&nbsp;&nbsp;煤质人员基本信息</div>
        <div class="toolbarTop">
            <div id="tools">
            
            <tr>          
                
                <td width="50"><input type="button" id="delete" value="删除"/></td>
                <td width="50"><input type="button" id="view" value="查询"/></td>
                <td width="50"><input type="button" id="account" value="生成台账"/></td>
             </div>
            <div id="pagination" style="float : right;"></div>               
        </div>
        </form>
        <div id="result"></div>
    </#if>
    </body>
</html>

展开全部

  • 写回答

2条回答 默认 最新

  • shuokai 2010-04-02 02:54
    关注

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


    New Document





    <br> $(function(){<br> $(&quot;#but&quot;).bind(&quot;click&quot;,function(){<br> addtr();<br> });<br> });<br> function addtr() {<br> //得到你要的内容 可以for循环<br> var $td=$(&quot;table tr:eq(1) td:eq(0)&quot;).text();<br> //执行ajax操作把数据存到数据库然后刷新LIST 就会出来<br> $.ajax();<br> }<br>


    add





    id name password
    1 dsa 123
    2 gfg 435
    3 vcvc 6565


    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 爱快路由器端口更改错误导致无法访问
  • ¥20 安装catkin时遇到了如下问题请问该如何解决呢
  • ¥15 VAE模型如何输出结果
  • ¥15 编译python程序为pyd文件报错:{"source code string cannot contain null bytes"
  • ¥20 关于#r语言#的问题:广义加行模型拟合曲线后如何求拐点
  • ¥15 fluent设置了自动保存后,会有几个时间点不保存
  • ¥20 激光照射到四象线探测器,通过液晶屏显示X、Y值
  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
  • ¥15 小程序有个导出到插件方式,我是在分包下引入的插件,这个export的路径对吗,我看官方文档上写的是相对路径
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部