下拉框多选，下拉框单选，文本框，弹出子页面带值、时间控件、区间起止卡号

zoukankan html css js c++ java

下拉框多选，下拉框单选，文本框，弹出子页面带值、时间控件、区间起止卡号

<%@page import="java.text.DateFormat"%>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ page import="org.springside.modules.security.springsecurity.SpringSecurityUtils" %>

<%@ include file="/common/taglibs.jsp" %>

<%@ include file="/common/globle.jsp" %>

<!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>

    <title>服务卡列表</title>

    <%@ include file="/common/csslib.jsp" %>

    <%@ include file="/common/jslib.jsp" %>

    <jsp:useBean id="now" class="java.util.Date" />    [d1]

    <script src="${ctx}/js/busiservicecard/servicecard.js" type="text/javascript"></script>



    <script type="text/javascript">

        var gridManager = null;

        var activeDialog = null;

        var currUserId='<%=currUserId%>';

        function f_openWindow(url, title, width, height)

        {

            var dialogOptions = { width, height: height, title: title, url: url, buttons: [

            { text: '保存', onclick: function (item, dialog)

            {

                dialog.frame.f_save();

            }

            },

            { text: '关闭', onclick: function (item, dialog)

            {

                dialog.close();

            }

            }

            ], isResize: true, timeParmName: 'a'

            };

            activeDialog = parent.jQuery.ligerDialog.open(dialogOptions);

        }



        function f_closeWindow(reload)

        {

            activeDialog && activeDialog.close();

            reload && f_reload();

        }



        $(function ()

         {

            f_setGrid();

        });

        var toolbarOptions = {

            items: [

            { text: '导出', click:f_btnClick,id:"export" , img:"${ctx}/js/ligerUI/skins/icons/excel.png"},

            { line: true },

            { text: '分配', click:f_btnClick,id:"delivery" , img:"${ctx}/js/images/add.png"},

            { line: true },

            { text: '重置', click:f_btnClick,id: "reset", img:"${ctx}/js/images/page_edit.png"},

            { line: true },

            { text: '作废', click:f_btnClick,id: "invalid", img:"${ctx}/js/images/page_edit.png"}

            ]

            };



         /**

         * 查询按钮

         */

        var toolbarOptionsquery = {

      items : [

        {

        text : '查询',click : f_query,id : "querydetail",img : "${ctx}/js/ligerUI/skins/icons/find.gif"},

        {text : '清空',click : f_queryClear,id : "queryclear",img : "${ctx}/js/ligerUI/skins/icons/clear.png"}

      ]};

        /**

      *清空按钮操作

      */

        function f_queryClear(){

       $("#company").val('');

        $("#companyname").ligerTextBox().setValue('选择商家');   [d2]

       $("#startno").ligerTextBox().setValue('起始卡号'); [d3]

        $("#endno").ligerTextBox().setValue('终止卡号');

        $("#startdate").ligerGetDateEditorManager().setValue('<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="yyyy-MM-dd"/>');

    $("#enddate").ligerGetDateEditorManager().setValue('<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="yyyy-MM-dd"/>');

      $("#staytime").ligerTextBox().setValue('---滞留时长---');

        $("#memo").ligerTextBox().setValue('备注');

        //清空复选框

        $("#status").val('');

        $("#status").ligerGetComboBoxManager().selectValue('--全部（状态）--');

        $("#status").ligerGetComboBoxManager().bulidContent();

        $("#status").blur();

      $("#staytime").val('');

        $("#staytime").ligerGetComboBoxManager().selectValue('---滞留时长---');

        $("#staytime").ligerGetComboBoxManager().bulidContent();

        $("#staytime").blur();

        }

        function f_query(){

        var companyid=$("#company").val();

        if(companyid=="选择商家"){

            companyid="";

        }

      var status=$("#statusid").val();

        if(status=="--全部（状态）--"){

            status="";

        }

        var memo=$("#memo").val();

        if(memo=="备注"){

            memo="";

        }

        var staytime = $('#staytime').val();

        if(staytime=="---滞留时长---"){

            staytime="-1";

        }

        var startno=$("#startno").val();

        var endno=$("#endno").val();

        if(startno=="起始卡号"){

            startno="";

        }

        if(endno=="终止卡号"){

            endno="";

         }

        if(endno!="终止卡号"){

            endno=endno.replace(/^0*/,"");        }

        var startDate=$("#startdate").val();

        var endDate=$("#enddate").val();

           gridManager.setOptions( {

                parms : [

                {

                name: 'filter_EQS_querydate',

                value: "'"+startDate+" 00:00:00' and "+"'"+endDate+" 23:59:59'"

            },

                {

                name :'filter_EQS _companyid',

                value :companyid

                },

                {

                name : 'filter_EQI_staytime',

                 value : staytime

                },

                {

                name:'filter_EQS_cardno',

                value :startno+" and "+endno[d11]

                },

                {

                name : 'filter_EQS_status',

                 value : status

                },

                {

                name:'filter_LIKES_memo',

                value: memo

                }

                ],

                newPage :1

               });

           gridManager.loadData(true);

        }



        var toolbar = {

        };

         $(function ()

        {

          var layout = $("#layout").ligerLayout( {

            leftWidth : 200

          });

           //查询条件

          $("#searchbar").ligerToolBar(toolbar);

          $("#searchbar").before("<div style='margin-left:4px;' class='l-toolbar-item'><table border='0'><tr>"+

           "<td style='margin-top:0px;margin-bottom:0px;'><input type='text' name='startno' id='startno' value='起始卡号' size='13' onblur="if(this.value=='') value='起始卡号';" onfocus="if(this.value=='起始卡号') value='';" style=''/></td>"+

           "<td style='text-align:center;'> 至 </td><td><input type='text' name='endno' id='endno' value='终止卡号' size='13' onblur="if(this.value=='') value='终止卡号';" onfocus="if(this.value=='终止卡号') value='';" style=''/></td>"+

           "<td>  </td><td><input type='text' name='companyname' id='companyname' onclick='f_findComapny()[d13] ;' size='15' value='选择商家' onblur='changeCompany(this);'/>[d14] <input type='hidden' name='company' id='company' value='-1'/></td>"+

          "<td>  </td><td><input type='text' name='memo' id='memo' value='备注' onblur="if(this.value=='') value='备注';" onfocus="if(this.value=='备注') value='';" style=''/></td><td>  </td>"+

           "<td>   </td><td><input type='text' name='status' id='status' value='--全部（状态）--' onblur="if(this.value=='') value='--全部（状态）--';" onfocus="if(this.value=='--全部（状态）--') value='';" style=''/></td>"+

          "<td>  </td><td style='text-align:right;font-weight:680;'>   </td><td><select id='staytime' style='100%;'><option value='-1'>---滞留时长---</option><option value='60'>60</option><option value='80'>80</option><option value='120'>120</option></select>[d15] </td>"+

           "<td>  </td></tr></table></div>");



           $("#toptoolbarquery").ligerToolBar(toolbarOptionsquery[d16] );

          $("div[toolbarid='querydetail']","#toptoolbarquery").before("<div style='margin-top:4px' class='l-toolbar-item'><table><tr>"+

          "<td></td><td><input type='text' name='startdate' id='startdate' ltype='date' onblur="if(this.value=='') value='';" onfocus="if(this.value=='') value='';" style=''/></td>" +

          "<td style='text-align:center;'> 至 </td><td><input type='text' name='enddate' id='enddate' ltype='date' onblur="if(this.value=='') value='';" onfocus="if(this.value=='') value='';" style=''/></td></tr></table></div>");



           f_setGrid();

            $("#startdate").ligerDateEditor({labelWidth: 80, labelAlign: 'left', 120});

            $("#startdate").ligerGetDateEditorManager().setValue('<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="yyyy-MM-dd"/>');

            $("#enddate").ligerDateEditor({labelWidth: 80, labelAlign: 'left',120});

            $("#enddate").ligerGetDateEditorManager().setValue('<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="yyyy-MM-dd"/>');

            $("#startno").ligerTextBox({Width:120,Height:5});

            $("#endno").ligerTextBox({Width:120,Height:5});

            $("#staytime").ligerComboBox({Width:120,Height:5});

            $("#companyname").ligerTextBox({Width:120,Height:5});

            $("#memo").ligerTextBox({Width:120,Height:5});

        });



        function f_setGrid()

        {

        //初始化状态

            $("#status").ligerComboBox({ isShowCheckBox: false,

            isMultiSelect: true,

           width : 150,

        selectBoxWidth : 150,

[d18]         selectBoxHeight : 200,

                data: [

                    { text: '已分配', id: '0' [d19] },

                    { text: '已使用', id: '1' },

                    { text: '申请作废', id: '2' },

                    { text: '已作废', id: '3'   },

                    { text: '作废失败', id: '4' },

                    { text: '已结算', id: '5'   }

                ], valueFieldID : 'statusid',label:'选择性别',labelWidth:200,labelAlign:'center'

            });

            gridManager = $("#maingrid").ligerGrid({

                columns: [

                { display: 'id', name: 'srvcardid', align: 'center', 40, minWidth: 40},

                { display: '服务卡号', name: 'cardno', align: 'center', 100},

                { display: '发卡日期', name: 'publishdate', align: 'center', 100,render:function(row){

                return row.publishdate.slice(0,10);

                }

                },

                { display: '服务商家', name: 'companyname', 290,render:function(row){

                if(row.company!=null){

                     return row.company.companyname;

                }else{

                     return "";

                }

                }},

                { display: '滞留时长(天)',name: 'staytime',140,render:function(row){

                if(row.status==0&&row.staytime!=0&&row.staytime>=0){

                     return row.staytime;

                }else{

                     return "0";

                }



                }},

                { display: '状态', name: 'status', 140,render:function(row){

                if(row.status==0){

                     return "已分配";

                }else if(row.status==1){

                     return "已使用";

                }else if(row.status==2){

                     return "申请作废";

                }else if(row.status==3){

                     return "已作废";

                }else if(row.status==4){

                     return "作废失败";

                }else if(row.status==5){

                     return "已结算";

                }

                }},

                { display:'备注信息',name: 'memo', 290,render:function(row){

                if(row.memo==null){

                     return " ";

                }else {

                     return row.memo;

                }

                }

                }

                ], dataAction: 'server',enabledSort:false,

                url: "busiservicecard!getList.action",toolbar: toolbarOptions, sortName: 'srvcardid',

                parms: [],

           '99.8%', height: '100%', pageSize: 30,

                checkbox: true,

                frozenCheckbox : false,

            frozenRownumbers :false,

            fixedCellHeight :false,

            rownumbers :true,

                heightDiff: -9,

                frozenCheckbox : false,



                 rownumbers :true,

                onError: function (a, b)

                {

                }

            });

        }



        function f_reload()

        {

            gridManager && gridManager.loadData(true);

            $("#startno").focus();

        }



        //搜索框初始化

$(function(){

     var layout1 = $("#layout1").ligerLayout( {

        height:65,

        topHeight:65

      });

      $(".content").hide(); //隐藏所有主体内容

      $('.s').toggle(function(){

      //选择class为s的元素,并添加toggle方法

      //toggle方法可以切换元素的可见状态,如可见便切换隐藏,反之亦然

        $(this).parent().nextAll('.content').slideDown();

        $("#myimg").attr("src","${ctx }/js/ligerUI/skins/icons/up.png");

        //给当前元素添加文本"隐藏",并找到父级元素之后的所有同辈元素.并添加向下展开效果

      },function(){

        $(this).parent().nextAll('.content').slideUp();

        $("#myimg").attr("src","${ctx }/js/ligerUI/skins/icons/down.png");

        //给当前元素添加文本"展开",并找到父级元素之后的所有同辈元素.并添加向上收缩效果

      });

   });

    </script>

<style type="text/css">

      .l-toolbar

      {    height:30px;

      }

      .l-toolbar-item

      {

         margin-top:4px;

      }

</style>

<style>

.title{ font-size:12px; font-weight:bold; text-indent:10px; line-height:25px; margin-top:2px; background:white; border:2px; }

.title span{ float:right; font-size:12px; margin-right:10px; color:block; cursor:pointer;}

.navline{height:1px;100%;border-bottom:1px solid #f5f5f5;background-color:#D9D9D9;margin-bottom:4px; margin-top:2px;}

</style>

</head>

<body style="padding: 0px; height: 100%;">

   

   <div class="title"><img src="${ctx}/js/ligerUI/skins/icons/search.gif"></img>  搜索<span class="s"><img id="myimg" src="${ctx }/js/ligerUI/skins/icons/down.png"/></span></div>

          <div class="navline"></div>

         <div class="content">

           <div id="layout1" >

           <div position="top" style="position: absolute; 100%; overflow-y: auto;" >

              <div id="searchbar" ></div>

              <div id="toptoolbarquery"></div>

[d21]            </div>

        </div>

      </div>

   

<input id="date" name="date" type="hidden"/>

    <div id="toolbarquery"></div>

    <div id="maingrid"></div>

</body>

</html>

最终效果图:

补充：

在父窗体调用子窗体的f_select方法

function f_findContactOK (item , dialog) {

      var fn = dialog.frame.f_select || dialog.frame.window.f_select;

   var data = fn();

   if (!data) {

      alert('请选择行!');

      return;

   }

      var idStr = "";

      var idName ="";

      $(data).each(function(i,item){

         idStr += item.companyid[d25] ;

         idName += item[d26] .companyname[d27] ;

      if (i < data.length - 1) idStr += ",";[d28]

         if (i < data.length - 1) idName += ",";

      });

   $("#companyname").val(idName);

   $("#company").val(idStr); [d29]

   dialog.close();

}

/**

* 选择所属商家

*/

function f_findComapny() {

   $.ligerDialog.open[d30] ({

      title : '选择商家',

      name : 'winselector',

      width : 550,

      height : 450,

      url : '../business/busiservicecard!company.action',

      buttons : [ {

        text : '确定',

        onclick[d31] : f_findContactOK//这样调的方法

      }, {

        text : '取消',

        onclick : f_findContactCancel

      } ]

   });

   return false;

}

[d1]初始化日期控件需要导入的类

[d2]清空子窗体的checked数据

[d3]清空普通input输入框的数据

[d4]清空时间，即初始化当然时间控件为当前日期

[d5]清空复选下拉框

[d6]清空单选下拉框

[d7]点击查询按钮，选判断input里面的值，如果没变就重新给companyid付值为空，这样在manager里面不会进hql语句

[d8]把008032转换为8032

[d9]点击查询按钮，把时间控件里的值传到后台，通过filter。不需要在action里面炒作，只需要在manager里面通过filtervalue和filtername取值

[d10]Ligerui的过滤器Filter自带过滤，但必须满足关键字约定：

EQS表示字符串eg：1；2；3；

EQI表示Integer类型

EQL表示long类型

LIKES表示模糊查询

[d11]这一个区间有两个自段

起止卡号区间，用这种方式在jsp页面把两个字段拼成一个新的字符串，传给后台

[d12]LigerUI自带参数，添加newPage：1表示每次技术查询到第N页，不刷新的情况下点击查询按钮，仍然可以重第一页开始查

[d13]点击文本框弹出子窗体，可以在子窗体任意选择多个商家，然后需要把商家名字：companyname和商家idcompanyid返回到父窗体。

思路：

1、在父窗体

1） f_findComapny方法，进一个空action弹出子页面busiservicecard-company.jsp

2）调子窗体的f_select方法

var fn = dialog.frame.f_select || dialog.frame.window.f_select

2、在子窗体

1）列出商家

2）获得选中的商家名称和id

//获取选中的行

         function f_select()

         {

            //var rowsdata=g.getSelectedRow();

            var rowsdata=g.getCheckedRows();

            return rowsdata;

         }

g表示展示子窗体显示商家的gridview控件别名

getCheckedRows（）获得多个选中的checkbox；而getSelectedRow只能获得一条

return rowsdata表示返回选中的值到父页面。父页面字需要调用这个f_select()方法就可以了。当然掉的方式很特殊：var fn = dialog.frame.f_select || dialog.frame.window.f_select;

frame表示子窗体。

[d14]

[d15]单选下拉框

[d16]绑定toolbar工具栏eg：查询、清除、导出按钮在上面

[d17]状态id，初始化起绑定作用。

[d18]一般设一样宽，这样下拉框和他的文本框一样宽，好看。

[d19]Text是显示值，id是传给后台的值

[d20]取下拉框选中的多个值，就取它对应的值

[d21]两个工具栏，toolbar

[d22]子窗体的ok按钮事件

[d23]表示回调函数返回的对象

[d24]LG.js里面的一个空方法，实质上他调的是dialog.frame.f_select返回的值是个data

[d25]商家id，对应数据库里面的字段名

[d26]主要：

如果是在同一个页面，idStr += item.companyid [d26];替换成：

idStr +=this.companyid [d26];

[d27]商家名称

[d28]拼成一个带逗号的字符串eg：1,2,3，

[d29]把得到的字符串，付值给之前申明的文本框

[d30]以dialog对话框的形式弹出子页面不是f_open，所以是在子页面自己窗体上写确定按钮。而不是父窗体

[d31]触发确定按钮事件

查看全文

相关阅读:
Java设计模式概述之结构型模式（装饰器模式）
Java设计模式概述之结构型模式（代理模式）
Java设计模式概述之结构型模式（适配器模式）
Java设计模式概述之创建型模式
 小诀窍
 iframe的一种应用场景
 linux网络
 ANT
Eclipse使用
 mac 安装tomcat

原文地址：https://www.cnblogs.com/pujiajia/p/3287325.html