【bf88必发唯一官网】询问出来一个列表,JQuery中的事件以及动画

by admin on 2019年2月11日

  学过javascript和接触过后端PHP语言必然要使用ajax,那是必学的一门科目,AJAX指的是Asynchronous
JavaScript and
XML,它利用XMLHttpRequest对象来与服务端脚本调换。请求格局,分为GET与POST:
GET
最为广泛的HTTP请求,普通上网浏览页面就是GET。GET形式的参数请求直接跟在URL后,以问号初始。

  学过javascript和接触过后端PHP语言必然要使用ajax,那是必学的一门科目,AJAX指的是Asynchronous
JavaScript and
XML,它采纳XMLHttpRequest对象来与服务端脚本调换。请求格局,分为GET与POST:
GET
最为广泛的HTTP请求,普通上网浏览页面就是GET。GET形式的参数请求直接跟在URL后,以问号开始。

 

JQuery中的事件以及动画,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等,首个参数是data,即传送过来的风浪目的,第多个参数是一个方式,即用来处理处 理绑定的事件函数那就是大家的一个破例的风云;其它在此地还举例写了一个动画中的例子,即文本音讯的显得或然隐藏,在还尚无读书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事件:模拟鼠标点击事件,当鼠标移动到成分上时触发第四个事件,当鼠标离开成分时接触第三个事件。三个事件之间互相切换触发;别的还要说下事 件冒泡,事件冒泡其实简单的知晓为:在一个页面上可以有五个事件,也得以多少个要素相应一个风云。像上边一样只要页面中存在多个因素,其中一个div成分嵌 套在另一个div成分中还要都绑定了一个click事件,那么当你点击内部中div成分时间,外部的div也会呈现,这就是事件冒泡。在此地需求注意的是都绑定了一个事变,不难想当然的以为唯有的里边暴发click事件。

.移除事件和一而再添加五个事件

<script>

$(function () {

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

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

});

$(“#btn”).bind(“click”, function () {          //可以三番五次添加三个事件

$(“#text”).append(“<p>我是第四个增加的事件</p>”)

})

.bind(“click”, function () {

$(“#text”).append(“<p>我是首个增进的风云</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(2000);        //在2秒内隐藏

//$(“#div”).show(2000);        //在2秒内浮现

//$(“#div”).fadeIn(2000);      //增强成分的不透明度,直至成分完全体现

//$(“#div”).fadeOut(2000);     //降低成分的不透明度,直至成分完全消灭

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

$(“div”).slideDown(2000);     //改变元素的中度,由上至下显得

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

【bf88必发唯一官网】询问出来一个列表,JQuery中的事件以及动画。}, function () {

$(“div”).slideUp(2000);       //改变成分的冲天,由下至上裁减隐藏

$(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;

 

}

</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: #800000;”>”><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 = $(“#【bf88必发唯一官网】询问出来一个列表,JQuery中的事件以及动画。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>

地点的操作是落成了在在左侧点击选用的项,然后添加到右侧的框中,可以一个一个的丰盛,也得以整个一遍性增加。

十一.表格的行使

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

<style>

.even {

 

}

.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事件
scriptsrc=”script/jquery-1.7.1.min.js”/script script $(function(){
$(“#dividh5.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:同步。

bf88必发唯一官网 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);
        })

bf88必发唯一官网 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>

 

bf88必发唯一官网 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#bf88必发唯一官网,</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地图