您的位置：首页 > 产品设计 > UI/UE

信息快报搜索功能模块：Easyui中的分页和自动换行

2017-03-10 09:36 323 查看
效果图：



在open2.jsp中：

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>

<%@ include file="/WEB-INF/views/include/tags.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<%@ include file="/WEB-INF/views/include/basic-head.jsp"%>
<%@ include file="/WEB-INF/views/include/easyui-head.jsp"%>

<title>使用easyui</title>

<script type="text/javascript" src="static/js/index/msgletters/msgletters2.js"></script>

</head>

<body  class="easyui-layout layout" >
<div data-options="region:'center'" >
<table  id="entityGrid"  style="font-size: 14px;"></table>
<div id="tb" >
  关键字：<input id="xxkbkey" class="easyui-textbox" style="width:180px;margin-top: 4px;height:20px;">
开始日期：<input id="startdate" style="width:90px;" editable="true" class="easyui-datebox" ></input>
结束日期：<input id="enddate" style="width:90px;" editable="true" class="easyui-datebox" ></input>
   <a id="btn1" href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="searchT()">查询</a> 
</div>
</div>

</body>

</html>

在msgletters2.js中：

$(document).ready(function(){

 //获取当前网址，如： http://localhost:8088/test/test.jsp  

    var curPath=window.document.location.href;  

    //获取主机地址之后的目录，如： test/test.jsp  

    var pathName=window.document.location.pathname;  

    var pos=curPath.indexOf(pathName);  

    //获取主机地址，如： http://localhost:8088  

    var localhostPaht=curPath.substring(0,pos);  

    //获取带"/"的项目名，如：/test  

    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 

    var path2=localhostPaht+projectName; 
load(path2); //项目路径不能写死

});

function load(path2){
$('#entityGrid').datagrid({
pageSize:20, //每页显示多少条数据
url:path + '/indexmore/msgletters2',
title: '信息快报列表',
height:'auto',
    rownumbers:true,
    fit:true,
   idField:'id',
    toolbar:'#tb', //把时间搜索框显示在上面，下面的分页工具也能显示出来；没有该属性，分页工具显示不出来，被隐藏了；
    singleSelect:true,
    pagination:true, //分页
    nowrap:false, //自动换行
    columns:[[

                 {field:'filename',title:'标题',width:270,

              formatter: function(value,row,index){

             /* if(row.filename.length >=23){

              var msg = row.filename.substring(0,22)+'...';

            return '<a target="_blank" href="http://localhost/ybzx/pop/getStartOffice?zhizuoflag=1&docname='+row.uploadfilename +'" title='+row.filename+'>'+msg+'</a>';

            }else{*/

            return '<a target="_blank" href="'+path2+'/pop/getStartOffice?zhizuoflag=1&docname='+row.uploadfilename +'" title='+row.filename+'>'+row.filename+'</a>';

            //}

              }

               },

               {field:'model',title:'摘要',width:420,

              formatter: function(value,row,index){

            /*if(row.model !=null && row.model.length >=25){

              var msg = row.model.substring(0,20)+'...';

            return '<a target="_blank" href="http://localhost/ybzx/pop/getStartOffice?zhizuoflag=1&docname='+row.uploadfilename +'" title='+row.model+'>'+msg+'</a>';

            }else{*/

            return '<a target="_blank" href="'+path2+'/pop/getStartOffice?zhizuoflag=1&docname='+row.uploadfilename +'" title='+row.model+'>'+row.model+'</a>';

            //}

              }},

               {field:'seltype',title:'选择类型',width:80},       

               {field:'istime',title:'时间',width:130},

               /*{field:'uploadfilename',title:'下载',width:80,

              formatter : function(value, row, index) {
var html = '';
html = '<a href="javascript:void(0);" onclick="downloadfile(\''
+ row.uploadfilename
+ '\',\''
+ row.spath + '\',\''+row.id+'\')" >下载</a>';

return html;
}}*/

    ]],

     

    onLoadSuccess:function(data)  

                {  

                   $(".note").tooltip(  

                       {  

                       onShow: function(){  

                           $(this).tooltip('tip').css({   

                               width:'200',                   

                               boxShadow: '1px 1px 3px #dff5ff'                          

                           });  

                       }  

                   }  

                   );  

                }
});
var p = $('#entityGrid').datagrid('getPager');
$(p).pagination({
pageSize:20,
showPageList:false,
displayMsg : '当前显示从{from}到{to}共{total}记录',
onSelectPage: function(pageNumber, pageSize){
var page=pageNumber;
var rows=pageSize;
var startdate = $('#startdate').datebox('getValue');
var enddate = $('#enddate').datebox('getValue');
var xxkbkey = $('#xxkbkey').val();
searchTask(page,rows,startdate,enddate,xxkbkey); //分页查询，传入的参数

        }
});

function searchTask(page,rows,startdate,enddate,xxkbkey){ //分页查询方法
$.ajax({
type : "POST",
url : path + '/indexmore/msgletters2',
data : {
page: page,
rows: rows,
startdate: startdate,
enddate: enddate,
xxkbkey: xxkbkey,
},
dataType : "json",
success : function(json) {
$('#entityGrid').datagrid('loadData', json);
}
});
}

}

function downloadfile(uploadfilename,spath,id) {
var url = path + '/indexdownload/download' + '?filename='+spath+encodeURI(uploadfilename)+".doc";
window.location.href=encodeURI(url);

}

function searchT() {  //查询按钮
var startdate = $('#startdate').datebox('getValue');//得到的参数
var enddate = $('#enddate').datebox('getValue'); //得到的参数
var xxkbkey = $('#xxkbkey').val(); //得到的参数
$('#entityGrid').datagrid('options').pageNumber = 1;  
$('#entityGrid').datagrid('getPager').pagination({pageNumber: 1}); 
var page = $('#entityGrid').datagrid('getPager').data("pagination").options.pageNumber;
var rows = $('#entityGrid').datagrid('getPager').data("pagination").options.pageSize;
$.ajax({
type : "POST",
url : path + '/indexmore/msgletters2',
data : {
page: page,
rows: rows,
xxkbkey: xxkbkey,
startdate : startdate,
enddate : enddate,
},
dataType : "json",
success : function(json) {
$('#entityGrid').datagrid('loadData', json);
}
});

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  easyui 分页 搜索
相关文章推荐
新的分享
章节导航