js 复制、全选功能

<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2015/10/23
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String inData = request.getAttribute("inData").toString();
%>
<%@ include file="/global/commonPage/includeHead/commonHead.jsp" %>
<%@ include file="/global/commonPage/includeHead/extHead.jsp" %>
<html>
<head>
    <title>数据详情</title>
    <script src="<%=baseUrl%>/global/js/jquery.json.js" ></script>
    <script src="<%=baseUrl%>/global/js/jquery.zclip.js" ></script>
    <script>
        $(document).ready(function(){
            var inData =‘<%=inData%>‘;
            formate2Json(inData);
        } );

        function formate2Json(data){
            var result = ‘‘;
            if(data != ‘‘){
                try{
                    result = new JSONFormat(data, 4).toString();
                } catch (e){
                    result = ‘<span style="color: #f1592a;font-weight:bold;">‘ + e + ‘</span>‘;
                }
            }
//            result = data;
            $("#main_data").html(result);
        }

        //关闭
        function closeClick(){
            $("#main_data").html(‘‘);
            parent.communicationEventHandlingWindow.hide();
        }

        //复制
        function selectAll(){
            $("#choose_all").zclip({
                path: "<%=baseUrl%>/global/js/ZeroClipboard.swf",
                copy: function(){
                    return $("#main_data").text();
                },
                beforeCopy:function(){/* 按住鼠标时的操作 */
                    $("#main_data").css("color","orange");
                },
                afterCopy:function(){/* 复制成功后的操作 */
                    var $copysuc = $("<div class=‘copy-tips‘><div class=‘copy-tips-wrap‘>? 复制成功</div></div>");
                    $("body").find(".copy-tips").remove().end().append($copysuc);
                    $(".copy-tips").fadeOut(3000);
                }
            });
        }

        //全选
        function SelectAllClicked(){
            //或者op1=$("#main_data")[0];
            var oP1 =  document.getElementById("main_data");
            var v =  document.createRange();
            v.selectNode(oP1);
            window.getSelection().addRange(v);

        }
    </script>
</head>
<body style="overflow: scroll">
<div>
    <input type="button" value="全选" onclick="SelectAllClicked()">
    <input type="button" value="复制" onclick="selectAll()" id="choose_all">
    <input type="button" value="关闭" onclick="closeClick()">
</div>
<hr/>
<div id="main_data" style="font-weight:normal"></div>
</body>
</html>
时间: 2024-08-10 21:29:25

js 复制、全选功能的相关文章

js实现全选功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS全选功能代码优化

最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能来做个简单的demo,使用目前现在的编码方式来重新编码,当然以后会一直用这种方式来编写自己的代码.下面是如下代码: JS所有代码: /** * JS全选 * @class Checkall * @param {Object} cfg * @param {Element|selector} [cfg.container] 限定全选的容器 * @par

js初学—实现checkbox全选功能

布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id="div1"> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkb

【JS】全选、不选、反选复选框(模板)

今天和大家分享一个全选.不选.反选复选框的例子,这个例子可以当做是一个模板使用,只要把一些数据适当改变以下就OK啦. 这是效果图: 代码如下: HTML部分: <input type="button" value="全选"/ id="btn1"> <input type="button" value="不选"/ id="btn2"> <input type=

elementUI+JS实现全选与反选

在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initia

用js做出全选和反选效果

效果图如下: <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript"> $(function(){  $("#selecAll").clic

全选功能实现总结

全选功能实现: xml部分: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content&

Android ListView条目全选功能,不用checkbox实现!

大家好,翻了翻以前的笔记,发现了一个我特别标记的功能,那就是ListView全选功能,顿时想起了我那个时候苦逼的生涯,由于我大学机械出身,大学毕业了都不知道什么叫代码,在58干了一段销售.实在是干不下去了,不干了就得在网上找工作,就喜欢干电脑相关的工作,有一天,一家培训机构给我打来电话让我去面试,我以为让我去工作那,谁知道是忽悠我去培训,我当然不可能花钱了,就直接回去了,想了几天,除了销售我真不知道干啥,咬咬牙,就花钱培训了.我擦,咋说这到了,不跟你们说了,还是写下面的这个功能吧,虽然很简单,但

JQUERY的给Check全选功能

//给Checkbox提供全选功能 $("#checkall").click(function(){ if(this.checked){ $("input[name='checkname[]']").each(function(){ this.checked = true; }); }else{ $("input[name='checkname[]']").each(function(){ this.checked = false; }); }

第十六篇 JS实现全选操作

JS实现全选 嗨,同学们好,老师这里是专门教同学解决一些针对性的问题,所以说综合起来,就要靠同学自己了. 这节课我们学一个很实用的东西,全选操作!比如淘宝这种商城对吧,我的购物车,我要全选购买,或者删除,一个一个的来肯定麻烦,所以就有了全选和批量处理,那就是复选框! 这里我们用一个table表格来控制吧!看代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&