采纳单选按钮,JQuery中的事件以及动画

  学过javascript和接触过后端PHP语言必然要利用ajax,那是必学的一门课程,AJAX指的是Asynchronous
JavaScript and
XML,它应用XMLHttpRequest对象来与服务端脚本沟通。请求方式,分为GET与POST:
GET
最为普遍的HTTP请求,普通上网浏览页面就是GET。GET格局的参数请求间接跟在U途锐L后,以问号开首。

  学过javascript和接触过后端PHP语言必然要利用ajax,那是必学的一门课程,AJAX指的是Asynchronous
JavaScript and
XML,它利用XMLHttpRequest对象来与服务端脚本沟通。请求格局,分为GET与POST:
GET
最为普遍的HTTP请求,普通上网浏览页面正是GET。GET格局的参数请求直接跟在URAV4L后,以问号起头。

 

JQuery中的事件以及动画

.bind事件

 

 

<script src=”script/jquery-1.7.1.min.js”></script>

    <script>

        $(function () {

            $(“#divid h5.head”).bind(“click”, function () {
 //bind事件,个中包蕴八个参数,第二个为事件,第一个为事件

                alert($(this).text());

            });

 

            $(“#divid h5.content”).css(“display”, “none”);  
 //css方法正是足以动态设置标签样式

        });

 

        $(function () {

            $(“#btnid”).bind(“click”, function () {

                if (bool == true) {

                    $(“#btnid .content”).css(“display”, “none”);

                    bool = false;

                    $(this).val(“显示”);

                }

                else {

                    $(“#btnid .content”).css(“display”, “”);

                    bool = true;

 

                    $(this).val(“隐藏”);

                }

            });

        });

 

            $(function () {

                $(“input[type=button]”).bind(“click”, function () {
 //内容的显得与潜伏

                    var content = $(“#divid .content”);

                    if (content.is(“:visible”)) {

                        content.hide();

                        $(this).val(“显示”);

                    }

                    else {

                        content.show();

                        $(this).val(“隐藏”);

                    }

                });

            });

    </script>

<body>

    <div id=”divid”>

        <h5 class=”head”>Rocky?</h5>

        <div class=”content”>就让雨下下来 不用带伞 让总体完蛋
看被淋湿的心 多短时间才会晒干</div>

    </div>

    <input type=”button” name=”name” value=”显示 ” id=”btnid” />

</body>

 

             
 在地方的操作中我们新学习了bind事件,而bind事件是多少个参数,第三个参数是事件的名字,例如:click,dbclick,mouseover等,第3个参数是data,即传送过来的事件指标,第十三个参数是3个办法,即用来处理处
理绑定的轩然大波函数那就是我们的2个非同一般的事件;此外在那里还举例写了3个卡通中的例子,即文本音讯的显得或然隐藏,在还未曾上学show()和
hide()在此以前咱们一般是根据地点第壹种方式来写的,定义二个bool类型的变量即可,那样写起来依旧很简单的,可是在写展现隐藏时间拍卖按钮上面依然蛮蛮烦的,所以在读书了show()和hide()后就简单许多了,就是直接能够隐蔽和呈现。能够对照一下,分明在代码的拍卖上差不多啦。

 

                 toggle事件和事件冒泡等

 

 

<script>

        $(function () {

            $(“input[type=button]”).toggle(function () {  
 //toggle多少个参数都为事件,轮番调用

                $(this).css(“backgroundColor”,”red”);

            }, function () {

                $(this).css(“backgroundColor”, “yellow”);

            });

        });

 

        $(function () {

            $(“div”).each(function () {

                $(this).bind(“mouseup”, function (e) {

                    alert(e.pageX);   //输出鼠标的x方向的职位

                    alert(e.pageY);   //输出鼠标的y方向的职责

                    alert(e.which);  
//输出鼠标的按键的取舍,1为鼠标左键,2为轴心按键,3为鼠标右键

                });

            });

        });

 

        $(function () {

            $(“#txt”).keydown(function () {

                e.preventDefault();      //阻止a标签链接

                alert(e.keyCode);           //键盘获取其ask码

            });

        });

 

        $(function () {

            $(“#ouuerdiv”).click(function () {

                alert($(this).text());

            });

            $(“#div”).click(function () {

                alert($(this).text());

            });

            $(“#innerdiv”).click(function () {        
 //在此处是写了一个事件的冒泡现象,组织冒泡能够行使preventDefault只怕precentDefault

                alert($(this).text());

            });

        })

    </script>

<body>

    <input type=”button” name=”btnname” value=”按钮” id=”btn”/>

    <div id=”ouuerdiv”> 外部div<div id=”div”>中部div<div
id=”innerdiv”>内部div</div></div></div>

    <a href=”” id=”a”>百度</a>

    <textarea id=”txt” rows=”5″ cols=”5″>

    </textarea>

</body> 

 

               
 Toggle事件:模拟鼠标点击事件,当鼠标移动到成分上时触发首个轩然大波,当鼠标离开成分时接触第三个事件。七个事件之间互相切换触发;其余还要说下事
件冒泡,事件冒泡其实不难的知道为:在一个页面上得以有八个事件,也得以三个要素相应五个事件。像上边一样只要页面中存在八个因素,在那之中3个div成分嵌
套在另二个div成分中还要都绑定了贰个click事件,那么当你点击内部中div成分时间,外部的div也会显得,那正是事件冒泡。在此地要求小心的是都绑定了1个轩然大波,不难想当然的觉得只是的在那之中产生click事件。

 

                 .移除事件和连接添加七个事件

 

 

<script>

        $(function () {

            $(“removeall”).click(function () {      

                $(“#btn”).unbind();                //完成移除事件

            });

 

            $(“#btn”).bind(“click”, function () {        
 //能够接二连三添加多少个事件

               
$(“#text”).append(“<p>小编是首先个拉长的事件</p>”)

            })

                    .bind(“click”, function () {

                       
$(“#text”).append(“<p>作者是第3个增进的轩然大波</p>”)

                    })

                           .bind(“click”, function () {

                             
 $(“#text”).append(“<p>作者是第多少个拉长的事件</p>”)

                           })

        });

    </script>

<body>

    <button id=”btn”>单击笔者吧</button><button
id=”removeall”>删除全体的轩然大波</button>

    <div id=”text”>div文本音讯</div>

</body>

 

               
上边大家学习了bind事件,正是丰裕贰个事变,而unbind就是移除事件,大家能够相比较一下,嘿嘿,而针对再而三添加多个事件实际正是当您添加玩三个事件后继续.bind添加事件即可。

 

                  .模拟事件

 

                  

 

               
 大家上学的地点的bind事件、click事件等一般都以透过单击按钮才能接触的风浪,不过有时光,供给经过模拟用户操作,来达到单击的作用,例如:在用户进入也买年后就触发click事件,而不需求用户去单击,那么我们就采用trigger()方法来形成模拟操作。

 

                  .一些任何的风云

 

<script>

        $(function () {

            $(“#btn”).click(function () {

                //$(“#div”).hide(两千);        //在2秒内隐藏

                //$(“#div”).show(两千);        //在2秒内展现

                //$(“#div”).fadeIn(3000);    
 //增强成分的不光滑度,直至成分完全展现

                //$(“#div”).fadeOut(三千);    
//降低成分的不折射率,直至元素完全没有

 

                $(“#btn”).toggle(function () { 

                    $(“div”).slideDown(三千);    
//改变成分的冲天,由上至下显得

                    $(this).val(“显示”)         

                }, function () {

                    $(“div”).slideUp(两千);      
//改变成分的可观,由下至上收缩隐藏

                    $(this).val(“隐藏”)

                });

            });

 

            //$(“#btn”).click(function () {

            //    $(“div”).fadeTo(600,0.2);      
//fadeTo方法适用于在0.6s内发光度是0.2

            //});

        });

    </script>

<body>

 <div id=”div” style=”width:300px; height:300px;”
>1234</div>

    <input type=”button” name=”name” value=”操作动画” id=”btn” />

</body>

 

                  .动绘画艺术术

 

                   

 

                    .多创作本框的利用-中度变化

 

 

 <script src=”script/jquery-1.7.1.min.js”></script>

    <style>

        input:focus,textarea:focus {

            border:1px solid #f00;

            background-color:#fcc;

        }

    </style>

    <script>

        $(function () {

            var comment = $(“#comment”);

            $(“.bigger”).click(function () {

                if (comment.height() < 500) {

                    comment.height($(“#comment”).height() + 100);
 //在原始中度的根基上抓好100

                }

            });

            $(“.smaller”).click(function () {  

                if (comment.height() > 100) {

                    comment.height($(“#comment”).height() – 100);
 //在原有高度的底子上下跌100

                }

            }); 

        })

    </script>

<body>

    <form action=”#” method=”post” id=”regform”>

        <div class=”msg”><span
class=”bigger”>放大</span><span
class=”smaller”>缩小</span></div>

        <div style=”” data-mce-style=”color:
#700000;”>”><textarea rows=”8″ cols=”20″
id=”comment”>海海海海</textarea></div>

    </form>

</body>

 

                   

 

             
上边的操作完成了点击放大时间,textarea的中度变高即面积变大,当点击收缩时间textarea的面积变小,即落实了动画的效率。

 

           .复选框应用

 

 

<script src=”script/jquery-1.7.1.min.js”></script>

    <script>

        $(function () {

            $(“#checkall”).bind(“click”, function () {

                $(“:checkbox”).each(function () {

                    $(this).attr(“checked”, “checked”);        
//点击按钮时间必要任何中选

                });

            });

 

            $(“#checkno”).bind(“click”, function () {

                $(“:checkbox”).attr(“checked”, false);  
 //点击按钮时间必要总体不选中

            });

 

            $(“#checkRev”).bind(“click”, function () {

                $(“:checkbox”).each(function () {

                    if ($(this).attr(“checked”) == “checked”) {

                        $(this).attr(“checked”, false);

                    }

                    else {

                        $(this).attr(“checked”, true);  
//点击按钮时间必要选中的解除,未入选的被入选

                    }

                });

            });

 

            //或者:

            $(this).attr(“checked”, !$(this).attr(“checked”));

        });

    </script>

<body>

    <form>你喜爱的移动?<br />

    <input type=”checkbox” name=”names” value=”足球 ”
 />足球<br />

     <input type=”checkbox” name=”names” value=”篮球 ”
/>篮球<br />

     <input type=”checkbox” name=”names” value=”排球 ”
/>排球<br />

     <input type=”checkbox” name=”names” value=”羽毛球 ”
/>羽毛球<br />

    <input type=”button” id=”checkall” value=”全选 ” /><br
/>

    <input type=”button” id=”checkno” value=”全不选 ” /><br
/>

    <input type=”button” id=”checkRev” value=”反选 ” /><br
/>

    <input type=”button” name=”send” value=”提交” /><br />

</form>

</body>

 

                 
 在那里须要专注的是,判断复选框选中要么不选中的状态,必须透过操纵成分的checked属性来达成目标,假若属性checked为true,表明被入选,借使为false,则表明未被选中。

 

                   .下拉框的选拔

 

 

<script src=”script/jquery-1.7.1.min.js”></script>

    <script>

        $(function () {

            $(“#add”).click(function () {

                var selectoption = $(“#select1 option:selected”);

                selectoption.remove();

                selectoption.appendTo(‘#select2’);  
 //把选中的项添加到右侧的aelect框中

            });

            $(“#addAll”).bind(“click”,function () {

                var options = $(“#select1 option”);

                options.appendTo(‘#select2’);

            });

        });

    </script>

<body>

    <div class=”center”>

        <select multiple=”multiple” id=”select1″ style=”width: 100px;
height: 160px”>

            <option value=”1″>选项1</option><option
value=”2″>选项2</option> <option
value=”3″>选项3</option>

            <option value=”4″>选项4</option><option
value=”5″>选项5</option><option
value=”6″>选项6</option>

            <option value=”7″>选项7</option><option
value=”8″>选项8</option><option
value=”9″>选项9</option>

        </select>

        <div>

            <span id=”add”>添加到右手</span>

            <span id=”addAll”>全体抬高到右手</span>

        </div>

    </div>

    <div class=”center” style=”float:right”>

        <select multiple=”multiple” id=”select2″ style=”width: 100px;
height: 160px” >

        </select>

    </div>

 

                       

 

               
上边的操作是落实了在在左侧点击选取的项,然后添加到左侧的框中,能够2个二个的拉长,也足以整个三回性增加。

 

                十一.表格的使用

 

 

 <script src=”script/jquery-1.7.1.min.js”></script>

        <style>

            .even {

                background-color: #采纳单选按钮,JQuery中的事件以及动画。fff38f;

            }

            .odd {

                background-color: #ffffee;

            }

    </style>

 

    <script>

        $(“#table tr:odd”).addClass(“odd”);        
 //采纳索引为奇数的行数

        $(“#table tr:even:not(:first)”).addClass(“even”);  
//选取索引为偶数的不外乎索引为0的行数

        $(“table tr”).each(function () {

            $(this).click(function () {

               
$(this).css(“backgroundColor”,”red”).siblings().css(“backgroundColor”,””);

            });

        })

    </script>

<body>

     <table border=”1″ id=”table”>

       
<thead><tr><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead><tbody>

            <tr class=”parent” id=”row1″><td
colspan=”3″>前台设计组</td></tr>

            <tr
class=”child1″><td>张三</td><td>男</td><td>湖南路易斯维尔</td></tr>

            <tr
class=”child1″><td>李四</td><td>女</td><td>青海科伦坡</td></tr>

            <tr class=”parent” id=”row2″><td
colspan=”3″>前台开发组</td></tr>

            <tr
class=”child2″><td>王五</td><td>男</td><td>湖北武汉</td></tr>

            <tr
class=”child2″><td>赵六</td><td>男</td><td>吉林弗罗茨瓦夫</td></tr>

            <tr class=”parent” id=”row3″><td
colspan=”3″>后台开发组</td></tr>

            <tr
class=”child3″><td>孙七</td><td>男</td><td>台湾夏洛特</td></tr>

            <tr
class=”child3″><td>周八</td><td>男</td><td>云南杜阿拉</td>

            </tr>

        </tbody>

    </table>

</body>

.bind事件 script
src=script/jquery-1.7.1.min.js/script script $(function () { $(#divid
h5.head).bind(click, function () { //bind事件,当中蕴涵…

  它能够发送和吸纳差异格式的音讯,包涵JSON,XML,HTML,AJAX最吸引人的特征是它的”async(异步)的真相,它表示它能够做有所那几个工作而不供给刷新页面。那使得你
能够依照用户事件只更新页面包车型大巴一有的。AJAX执行达成后才会继续运转其余代码页面假死状态解除。
而异步则这么些AJAX代码运营中的时候任何代码一样能够运转。
jquery的async:false,这特特性 默许是true:异步,false:同步。

  它能够发送和接收不一致格式的音信,包含JSON,XML,HTML,AJAX最吸引人的表征是它的”async(异步)的本质,它意味着它能够做有所这一个工作而不须求刷新页面。那使得你
能够依照用户事件只更新页面包车型地铁一有个别。AJAX执行完毕后才会一而再运转其余代码页面假死状态解除。
而异步则那一个AJAX代码运转中的时候任何代码一样能够运作。
jquery的async:false,那脾本性 暗中认可是true:异步,false:同步。

亚洲必赢官网 1

  <html>
    <head>
        <meta charset = utf-8>
        <link rel=”stylesheet” type=”text/css” href =
“bootstrap.css”>
        <script type=”text/javascript”
src=”jquery-1.9.1.js”></script>
    </head>
    <body>
        <!–布局–>
        <div class = “container”>  <!–容器–>
            <div class = “panel panel-default”>
<!–面板–>
                <div class = “panel panel-heading”>
                    <h1>1409D学生新闻</h1>
                </div>
                <div class=”panel panel-body”>
                    <div class=”form-inline”>
                        <div class=”form-group”>
                            <select class=”form-control”
id=”select”>  <!–下垃选项–>
                                <option
value=””>请选用依据什么查询</option>
                                <option
value=”name”>姓名查询</option>
                                <option
value=”sex”>性别查询</option>
                                <option
value=”age”>年龄查询</option>
                                <option
value=”tel”>电话询问</option>
                                <option
value=”addr”>市镇部查询</option>
                            </select>                          
                         <!–输入框–>
                            <input type=”text” id = “textname”
class=”form-control” placeholder=”请输入查询内容”>
                            <button class=”btn btn-info”
id=”find”>查询</button>
                            <button class=”btn btn-link”
id=”all”>呈现全部</button>
                        </div>
                    </div>

  <html>
    <head>
        <meta charset = utf-8>
        <link rel=”stylesheet” type=”text/css” href =
“bootstrap.css”>
        <script type=”text/javascript”
src=”jquery-1.9.1.js”></script>
    </head>
    <body>
        <!–布局–>
        <div class = “container”>  <!–容器–>
            <div class = “panel panel-default”>
<!–面板–>
                <div class = “panel panel-heading”>
                    <h1>1409D学童音讯</h1>
                </div>
                <div class=”panel panel-body”>
                    <div class=”form-inline”>
                        <div class=”form-group”>
                            <select class=”form-control”
id=”select”>  <!–下垃选项–>
                                <option
value=””>请选拔遵照什么查询</option>
                                <option
value=”name”>姓名查询</option>
                                <option
value=”sex”>性别查询</option>
                                <option
value=”age”>年龄查询</option>
                                <option
value=”tel”>电话询问</option>
                                <option
value=”addr”>市镇部查询</option>
                            </select>                          
                         <!–输入框–>
                            <input type=”text” id = “textname”
class=”form-control” placeholder=”请输入查询内容”>
                            <button class=”btn btn-info”
id=”find”>查询</button>
                            <button class=”btn btn-link”
id=”all”>展现全体</button>
                        </div>
                    </div>

 

                    <table class=”table table-holder”> 
<!–表格–>
                        <thead>   <!–表头–>
                            <tr>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>电话</th>
                                <th>市场部</th>
                            </tr>
                        </thead>
                        <tbody></tbody>  
<!–内容核心–>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>
<script type=”text/javascript”>
    $(document).ready(function () {
        show(null,null);    //先暗许为空值
        $(“#find”).click(function () {   //点击查找事件调用方法
            var select = $(“#select”).val();  //定义变量接收下拉选用
            var textname = $(“#textname”).val();  
//定义变量接收文本框的值
            show(select,textname);
        })

                    <table class=”table table-holder”> 
<!–表格–>
                        <thead>   <!–表头–>
                            <tr>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>电话</th>
                                <th>市场部</th>
                            </tr>
                        </thead>
                        <tbody></tbody>  
<!–内容大旨–>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>
<script type=”text/javascript”>
    $(document).ready(function () {
        show(null,null);    //先默许为空值
        $(“#find”).click(function () {   //点击查找事件调用方法
            var select = $(“#select”).val();  //定义变量接收下拉选择
            var textname = $(“#textname”).val();  
//定义变量接收文本框的值
            show(select,textname);
        })

亚洲必赢官网 2

        $(“#all”).click(function () {    //点击all显视全部调用函数
            show(null,null);    //默许彰显为空值
            $(“#all”).val(“”);   //赋空值
            $(“#all option”).eq(0).prop(“selected”,true); 
//给all按键为下拉精选第②个值
        })
    })
    function show(select,textname) {  //show函数字传送参
            $.ajax({
            url:”show.php”,   //地址文件路径
            data:{“select”:select,”name”:textname},  //数据传递参数
            dataType:”json”,   //数据类型为json
            success:function (data) {   //成功时传参
                var tr=””;   //定义变量
                $.each(data,function (key,value) {   //循环传递的键值
                  
 tr+=”<tr><td>”+value[1]+”</td><td>”+value[2]+”</td><td>”+value[3]+”</td><td>”+value[4]+”</td><td>”+value[5]+”</td></tr>”;
                })
                $(“tbody”).html(tr);  //替换每一行
            },
            error:function () {    //战败时提示退步
                alert(‘失败’)
            }
        })
    }
</script>

        $(“#all”).click(function () {    //点击all显视全体调用函数
            show(null,null);    //暗许展现为空值
            $(“#all”).val(“”);   //赋空值
            $(“#all option”).eq(0).prop(“selected”,true); 
//给all按键为下拉精选第③个值
        })
    })
    function show(select,textname) {  //show函数字传送参
            $.ajax({
            url:”show.php”,   //地址文件路径
            data:{“select”:select,”name”:textname},  //数据传递参数
            dataType:”json”,   //数据类型为json
            success:function (data) {   //成功时传参
                var tr=””;   //定义变量
                $.each(data,function (key,value) {   //循环传递的键值
                  
 tr+=”<tr><td>”+value[1]+”</td><td>”+value[2]+”</td><td>”+value[3]+”</td><td>”+value[4]+”</td><td>”+value[5]+”</td></tr>”;
                })
                $(“tbody”).html(tr);  //替换每一行
            },
            error:function () {    //败北时提示战败
                alert(‘失败’)
            }
        })
    }
</script>

 

亚洲必赢官网 3

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
${inc:/action/ccms/newpub}
<link href=”${def:context}/js/project/erpClub/css/defeat3.css”
rel=”stylesheet”/>
<link href=”${def:context}/js/project/erpClub/css/erpindex.css”
rel=”stylesheet”/>
<title>储藏柜报表查询</title>
<style type=”text/css”>

.Visited{
position:absolute;
left:62px;
top:125px;
}
</style>
</head>
<body>

    <div class=”panel panel-default col_mainInner”>
        <div class=”panel-body col_main_body”>
            <form class=”form-horizontal” role=”form” method=”post”
id=”searchForm”>
            <!–  –>
            <div class=”Visiting”>
            <input name=”sort” type=”hidden”
value=”vc_code”preserve=”true” />
            <input name=”order”type=”hidden” value=”desc”
preserve=”true” />
            <input name=”pageNo” type=”hidden” value=””
preserve=”true” />
            <input name=”totalPages” type=”hidden” value=””
preserve=”true” />
                <input type=”hidden” id=”vc_type” name=”vc_type”
value=”0″></input>
                        <div class=”banner-top ba3″>
                             <input type=”radio” name=”zhuyongjilu” 
value=”0″ checked=”checked” id=”tradeType1″/>默认                  
 
                             <label>储物柜号</label>
                             <input type=”text” id=”vc_cabinetcode”
name=”vc_cabinetcode”/>
                        </div>
                    
                        <div class=”banner-top ba3″
style=”margin-left: -70px”>
                             <label>状态</label>          
         
                             <select name=’vc_status’
id=”vc_status”>
                                 <option
value=””>所有</option>
                                 <option
value=”0″>空闲</option>
                                 <option 
value=”1″>已占用</option>
                                 <option 
value=”2″>无效</option>
                                 <option 
value=”3″>其他</option>
                              </select>
                        </div>
                        <div class=”banner-top ba3″>
                            <button class=”btn btn-info btn-sm”
type=”button”id=”search_btn”>查询</button>
                            <button class=”btn btn-info btn-sm”
type=”button” id=”search_reset_btn”>清空</button>
                       </div>
                </div>
                <div class=”Visitedd”>
                <div class=”banner-top ba3″>
                             <input   type=”radio” 
name=”zhuyongjilu”  value=”1″ id=”tradeType1″/>租用记录查询          
         
                             <label>姓名/卡号</label>
                             <input type=”text” id=”vc_name”
name=”vc_name”  readOnly/>
                        </div>
                </div>    
                <div class=”Visited”>
                    <div  class=”banner-top ba4″>
                        <input type=”radio”name=”zhuyongjilu” 
value=”2″ />到期查询
                        <label  style=”” 
class=””>日期</label>
                        <input type=”text” id=”c_startdate”
name=”c_startdate” value=”” maxlength=”80″  readOnly />
                        <label>-</label>
                        <input type=”text” id=”c_enddate”
name=”c_enddate” value=”” maxlength=”80″  readOnly  />
                    </div>
                </div>
            </form>
            <table class=”table table-bordered”
style=”margin-top:130px;”>
                 <thead id=”showlist” >
                    <!– <tr>
                        <th class=”sortable d” code=”xuhao”
>序号</th>
                        <th class=”sortable d”
code=”vc_cabinetcode”>储物柜号</th>
                        <th class=”sortable huiyuanhao”
code=”vc_customercode”>会员号</th>
                        <th class=”sortable xingming”
code=”vc_name”>姓名</th>
                        <th class=”sortable kahao”
code=”vc_code”>卡号</th>
                        <th class=”sortable qizhuriqi”
code=”c_startdate”>起租日期</th>
                        <th class=”sortable zhuangtai”
code=”vc_status”>状态</th>
                        <th class=”sortable daoqqiriqi”
code=”c_enddate”>到期日期</th>
                        <th class=”sortable b”
code=”vc_hometel”>电话</th>
                        <th class=”sortable b”
code=”vc_mobile”>手机</th>
                        <th class=”sortable b”
code=”vc_mc”>会籍</th>
                    </tr> –>
                </thead>
                <tbody id=”datagridTemplate” style=”display:
none;”>
            <!–         <tr>
                        <th class=”sortable
d”>#xuhao#</th>
                        <th class=”sortable d”
>#vc_cabinetcode#</th>
                        <th class=”sortable huiyuanhao”
>#vc_customercode#</th>
                        <th class=”sortable xingming”
>#vc_name#</th>
                        <th class=”sortable kahao”
>#vc_code#</th>
                        <th class=”sortable qizhuriqi”
>#c_startdate#</th>
                        <th class=”sortable  zhuangtai”
>#vc_status#</th>
                        <th class=”sortable daoqiriqi”
>#c_enddate#</th>
                        <th class=”sortable
b”>#vc_hometel#</th>
                        <th class=”sortable b”
>#vc_mobile#</th>
                        <th class=”sortable b”
>#vc_mc#</th>
                    </tr> –>
                </tbody>
                <tbody id=”datagrid”>
                </tbody>
            </table>
            <div class=”pageDiv” >
                <ul class=”pagination”>
                </ul>
            </div>
        </div>
    </div>
    <input type=”hidden” name=”actionroot” id=”actionroot”
value=”${def:actionroot}” />
<script language=”JavaScript”>
var search=null;
$(document).ready(function() {
    /* $(‘.a, .b, .c, .xingming, .kahao, .qizhuriqi,
.huiyuanhao’).hide();
    $(“#sp”).hide(); */
    var type=$(“input[name=zhuyongjilu]:checked”).val();
    showType(type);
    $(“#vc_cabinetcode”).focus(function(){
        $(“#c_enddate”).val(”);
        $(“#c_startdate”).val(”);
        $(“#vc_name”).val(”);
        $(“#vc_status”).val(”);
    });
    $Dialog().date($(‘#c_startdate’));
    $Dialog().date($(‘#c_enddate’),function(){
        var c_startdate=$(‘#c_startdate’).val();
        var c_enddate=$(‘#c_enddate’).val();
         if( “” != c_startdate &&  “” != c_enddate &&
c_startdate>=c_enddate){
             alert(‘结束日期不可能早于开头日期!’);
             $(‘#c_enddate’).val(”);
         }
    });
    $(“input[name=zhuyongjilu]”).unbind().on(‘ifClicked’,function(){
         var type=$(this).val();
          showType(type);
    });
    this.search=search;
  
 search=$Search({datagrid:”datagrid”,formId:”searchForm”,success:function(){
    }}).initSearchBtn().searchData(1);
});

function showType(type){
    if(type==’0′){
        $(‘#vc_type’).val(0);
        
        $(“#showlist”).empty();
        $(“#showlist”).append(‘<tr >’
        + ‘<th class=”sortable” code=”xuhao” >序号</th>’
        + ‘<th class=”sortable”
code=”vc_cabinetcode”>储物柜号</th>’
        + ‘<th class=”sortable”
code=”vc_status”>状态</th>’
        + ‘<th class=”sortable”
code=”c_enddate”>到期日期</th>’
        + ‘</tr>’);
        $(“#datagridTemplate”).empty();
        $(“#datagrid”).empty();
        $(“#datagridTemplate”).append(‘<tr>’
        + ‘<td align=”center”>#xuhao#</td>’
        +  ‘<td align=”center”>#vc_cabinetcode#</td>’
        + ‘<td align=”center”>#vc_status#</td>’
        + ‘<td  align=”center”>#c_enddate#</td>’
        + ‘</tr>’);
    $(‘#vc_name’).attr(‘readOnly’,true);
        $(‘#c_startdate’).attr(‘readOnly’,true);
        $(‘#c_enddate’).attr(‘readOnly’,true);
        $(‘#vc_cabinetcode’).attr(‘readOnly’,false);
        $(‘#vc_status’).attr(‘readOnly’,false);
       
        $(‘#c_startdate’).val(”);
        $(‘#c_enddate’).val(”);
        $(‘#vc_name’).val(”);
       if( null != search ){
           search.searchData(1);
       }
    }else if(type==’1′){
        $(‘#vc_type’).val(1);
             $(‘#vc_name’).attr(‘readOnly’,false);
             $(‘#c_startdate’).attr(‘readOnly’,true);
             $(‘#c_enddate’).attr(‘readOnly’,true);
             $(‘#vc_cabinetcode’).attr(‘readOnly’,true);
             $(‘#vc_status’).attr(‘readOnly’,true);
            
             $(‘#c_startdate’).val(”);
             $(‘#c_enddate’).val(”);
             $(‘#vc_cabinetcode’).val(”);
             $(‘#vc_status’).val(”);
            
                $(“#showlist”).empty();
                $(“#showlist”).append(‘<tr>’
                + ‘<th class=”sortable” code=”xuhao”
>序号</th>’
                + ‘<th class=”sortable”
code=”vc_customercode”>会员号</th>’
                + ‘<th class=”sortable”
code=”vc_code”>卡号</th>’
                + ‘<th class=”sortable ”
code=”vc_cabinetcode”>储物柜号</th>’
                + ‘ <th class=”sortable ”
code=”c_startdate”>起租日期</th>’
                + ‘<th class=”sortable ”
code=”c_enddate”>到期日期</th>’
                + ‘</tr>’);    
                $(“#datagridTemplate”).empty();
                $(“#datagrid”).empty();
                $(“#datagridTemplate”).append(‘<tr>’
                        + ‘<td
align=”center”>#xuhao#</td>’
                        +  ‘<td
align=”center”>#vc_customercode#</td>’
                        + ‘<td
align=”center”>#vc_code#</td>’
                        + ‘<td 
align=”center”>#vc_cabinetcode#</td>’
                        + ‘<td 
align=”center”>#c_startdate#</td>’
                        + ‘<td 
align=”center”>#c_enddate#</td>’
                        + ‘</tr>’);
                  if( null != search ){
                       search.searchData(1);
                   }
     }else if(type==’2′){
         $(“#c_startdate”).val(“${def:date}”);
         $(“#c_enddate”).val(“${def:date}”);
         $(‘#vc_type’).val(2);
         $(‘#vc_cabinetcode’).attr(‘readOnly’,true);
         $(‘#vc_status’).attr(‘readOnly’,true);
         $(‘#vc_name’).attr(‘readOnly’,true);
         $(‘#c_startdate’).attr(‘readOnly’,true);
         $(‘#c_enddate’).attr(‘readOnly’,true);
亚洲必赢官网 ,         $(‘#vc_name’).val(”);
          $(‘#vc_cabinetcode’).val(”);
            $(‘#vc_status’).val(”);
        
           $(“#showlist”).empty();
        $(“#showlist”).append(‘<tr>’
        + ‘<th class=”sortable” code=”xuhao” >序号</th>’
        + ‘<th class=”sortable ”
code=”vc_cabinetcode”>储物柜号</th>’
        + ‘<th class=”sortable”
code=”vc_customercode”>会员号</th>’
        + ‘ <th class=”sortable xingming”
code=”vc_name”>姓名</th>’
        + ‘<th class=”sortable ”
code=”c_enddate”>到期日期</th>’
        + ‘<th class=”sortable b”
code=”vc_hometel”>电话</th>’
        + ‘<th class=”sortable b”
code=”vc_mobile”>手机</th>’
        + ‘ <th class=”sortable b”
code=”vc_mc”>会籍</th>’
        + ‘</tr>’);    
        $(“#datagridTemplate”).empty();
        $(“#datagrid”).empty();
        $(“#datagridTemplate”).append(‘<tr>’
                + ‘<td align=”center”>#xuhao#</td>’
                + ‘<td 
align=”center”>#vc_cabinetcode#</td>’
                +  ‘<td
align=”center”>#vc_customercode#</td>’
                + ‘<td  align=”center”>#vc_name#</td>’
                + ‘<td 
align=”center”>#c_enddate#</td>’
                + ‘<td 
align=”center”>#vc_hometel#</td>’
                + ‘<td 
align=”center”>#vc_mobile#</td>’
                + ‘<td  align=”center”>#vc_mc#</td>’
                + ‘</tr>’);
          if( null != search ){
               search.searchData(1);
           }
     }
        //$(“#datagrid”).append(“<td colspan=’8′
class=’no-data’>没有记录</td>”);
}
</script>
</body>
</html>

网站地图xml地图