1.实现效果图
2.程序入口
界面控件:
<input name="VESSEL_CD" type="text" id="VESSEL_CD" value="<%=oFile.getVESSEL_CD()%>" class="text_readonly" readonly="readonly" style="display: none;"/>
<input name="VESSEL_NM" type="text" id="VESSEL_NM" value="<%=oFile.getVESSEL_NM()%>" class="text_readonly" readonly="readonly" style="width:67%;"/>
<img id="VESSEL_CD_img" src="<%=request.getContextPath()%>/include/F7Select/search.gif" style="cursor: pointer;margin-left:3px; width=20px; height=21px;" οnclick="javascript:VESSEL_CD_F7SelectBox();"></img>
<label><font color="red">*</font></label>
参数构造:
function VESSEL_CD_F7SelectBox()
{
var sql = "select FILEID,VESSEL_CD,VESSEL_EN_NM,VESSEL_CN_NM,SHORT_NM,OTHER_NM,FINANCIAL_CODE,BUILDER,CONVERT(varchar(100), BUILTDATE, 23) BUILTDATE,HULLNO,CONVERT(varchar(100), RECEIVE_TM, 23) RECEIVE_TM from SH_BASE_VESSEL_GENERAL"
var pkColName = "FILEID";
var colNames = "VESSEL_CD,HULLNO,VESSEL_EN_NM,VESSEL_CN_NM,SHORT_NM,OTHER_NM,FINANCIAL_CODE,RECEIVE_TM";
var colTitles = "船舶编号,船体编号,英文名称,中文名称,简称,曾用名,财务编码,接收时间";
var likeFields = "VESSEL_CD,HULLNO,VESSEL_EN_NM,VESSEL_CN_NM,SHORT_NM,OTHER_NM,FINANCIAL_CODE";
var retValue = F7SelectDialog(sql,pkColName,colNames,colTitles,likeFields);//打开F7选择对话框,返回选择对象
if(retValue!="" && retValue!=undefined)
{
var retValue = eval(retValue);
var VESSEL_CD = retValue[0].VESSEL_CD;
var VESSEL_EN_NM = retValue[0].VESSEL_EN_NM;
$("#VESSEL_CD").val(VESSEL_CD);
$("#VESSEL_NM").val(VESSEL_EN_NM);
}
}
调用函数:
function F7SelectDialog(sql,pkColName,colNames,colTitles,likeFields)
{
var sql = encodeURIComponent(sql);
var pkColName = encodeURIComponent(pkColName);
var colNames = encodeURIComponent(colNames);
var colTitles = encodeURIComponent(colTitles);
var likeFields = encodeURIComponent(likeFields);
var url = "<%=request.getContextPath()%>/scripts/common/f7Select/F7SelectList.jsp?"
+ "sql="+sql+"&colNames="+colNames+"&colTitles="+colTitles+"&pkColName="+pkColName+"&likeFields="+likeFields+"&r="+new Date().getTime();
var dialogWidth = 850;
var dialogHeight = 700;
var bleft = (window.screen.width - dialogWidth) / 2;
var btop = (window.screen.height - dialogHeight) / 2;
var retValue = window.showModalDialog(url,document,'dialogWidth:'+dialogWidth+'px;dialogHeight:'+dialogHeight+'px;dialogLeft:'+bleft+'px;dialogTop:'+btop+'px;scroll:no;');
return retValue;
}
3.数据列表界面F7SelectList.jsp
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.text.DateFormat"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page import="com.costech.common.helper.AuthHelper" %>
<%@page import="com.costech.common.util.StringUtility" %>
<%@page import="com.costech.common.constants.CommonConstants"%>
<%@page import="com.costech.common.service.ICommonService"%>
<%@page import="com.costech.common.helper.ServiceHelper"%>
<%@page import="com.costech.common.bean.Attachment" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
ICommonService gd = (ICommonService)ServiceHelper.getService(CommonConstants.COMMON_SERVICE);
//获取参数值
String sql = StringUtility.toStringValue(request.getParameter("sql"),"");
sql = new String(sql.getBytes("iso8859-1"),"UTF-8");//解决中文乱码和特殊字符的问题
String pkColName = StringUtility.toStringValue(request.getParameter("pkColName"),"");
String colNames = StringUtility.toStringValue(request.getParameter("colNames"),"");
String colTitles = StringUtility.toStringValue(request.getParameter("colTitles"),"");
colTitles = new String(colTitles.getBytes("iso8859-1"),"UTF-8");
String likeFields = StringUtility.toStringValue(request.getParameter("likeFields"),"");
likeFields = new String(likeFields.getBytes("iso8859-1"),"UTF-8");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>F7选择对话框</title>
<base target="_self">
<script src='<%=request.getContextPath() %>/include/jquery-1.11.1.min.js'></script>
<SCRIPT language=JavaScript src="<%=request.getContextPath()%>/include/list.js"></SCRIPT>
<SCRIPT language=JavaScript src="F7SelectList.js"></SCRIPT>
<style type="text/css">
body{background-color:#F2FAFF;}
table{border-right:1px solid #B2CCE5;border-bottom:1px solid #B2CCE5;font-size: 12px;table-layout:fixed;}
table th{background-color:#E0EAF7; border-left:1px solid #B2CCE5;border-top:1px solid #B2CCE5;color:#01245E;}
table td{border-left:1px solid #B2CCE5;border-top:1px solid #B2CCE5;overflow:hidden;text-overflow:ellipsis;}
.text_input{
font-size:12px;
font-family: Arial,verdana;
height: 20px;
color:#000000;
padding-top:3px;
background-color:#FFFFFF;
border: 1 solid #7898c8;
}
</style>
<script type="text/JavaScript">
//文档加载完成函数,把参数值传递给js保存
$(document).ready(function(){
init("<%=path%>","<%=sql%>","<%=pkColName%>","<%=colNames%>","<%=colTitles%>","<%=likeFields%>");
});
</script>
</head>
<body>
<div style="width: 100%;height: 25px;background-color: #E0EAF7;">
<div style="width:30%;float:left;margin-left:1px; margin-top: 3px;">
<input id="likeWord" type="text" style="width: 70%;" class="text_input"/>
<button type="button" style="width: 20%;valign: middle;cursor: hand;background-color: transparent; border: 0;"
οnclick="query_click()" οnmοuseοver="style.backgroundColor='white'" onMouseOut="style.backgroundColor='#E0EAF7'">
<img src="<%=request.getContextPath() %>/image/common/search.gif" width="15" height="15" align="absbottom">查询
</button>
</div>
<div style="float: right;font-size: 12px;margin-top: 10px;margin-right: 3px;color: #01245E;">
共<label id="total"></label>条记录 共<label id="totalPage"></label>页 第<label id="pageNumber"></label>页
<a style="cursor: hand;" οnclick="firstPage()">首页</a>
<a style="cursor: hand;" οnclick="previousPage()">上一页</a>
<a style="cursor: hand;" οnclick="nextPage()">下一页</a>
<a style="cursor: hand;" οnclick="lastPage()">尾页</a>
</div>
</div>
<div id="dataList" style="height: 90%;OVERFLOW-Y: auto;border: 3px solid #B2CCE5;"></div>
<div style="width: 100%;height: 100%;background-color: #E0EAF7;text-align:center;">
<button type="button" style="margin-top:10px;valign: middle;cursor: hand;background-color: transparent;border:1px solid #135FA4;width:80px; height: 22px;"
οnclick="confirm()" οnmοuseοver="style.backgroundColor='white'" onMouseOut="style.backgroundColor='#E0EAF7'">
确定
</button>
<button type="button" style="valign: middle;cursor: hand;background-color: transparent;border:1px solid #135FA4;width:80px;height: 22px;"
οnclick="cancel()" οnmοuseοver="style.backgroundColor='white'" onMouseOut="style.backgroundColor='#E0EAF7'">
取消
</button>
</div>
<a id="reload" href="" style="display:none" style="display: none;">reload</a>
</body>
</html>
4.列表界面功能实现F7SelectList.js
var path = "";//当前路径
var selectedObjs = new Array();//已选择的行对象
var sql = "";//数据查询sql
var pkColName = "";//主键字段名
var colNames = "";//数据表格显示列字段
var colNamesArr = new Array();//数据表格显示列字段
var colTitles = "";//数据表格显示列标题
var colTitlesArr = new Array();//数据表格显示列标题
var pageSize = 20;//每页显示记录数
var pageNumber = 1;//第几页
var likeFields = "";//支持模糊查询的字段名
var likeWord = "";//模糊查询字
var total = "0";//总记录数
var totalPage = "0";//总页数
/**
* 初始化
* @param path 当前路径
* @param sql 数据查询sql,必须包含主键列pkColName,表格显示列colNames,模糊查询的列likeFields,如"select * from DD_PRODUCT"
* @param pkColName 主键列,只能是一个字段名,如"FileID"
* @param colNames 表格显示列,可以多个字段,多个字段用","分隔,如"OrderNo,ProductName,SerialNumber,Number,Price,Total,DeliverysTime,EndTimes,Status,Material,Units"
* @param colTitles 表格显示列标题,如"订单号,产品名称,序列号,数量,单价,总价,交付时间,结束时间,状态,材料,单位"
* @param likeFields 支持模糊查询的列,如"OrderNo,ProductName"
* @returns {init}
*/
function init(path,sql,pkColName,colNames,colTitles,likeFields)
{
if(isEmpty(sql))
{
alert("查询sql语句不能为空");
return;
}
if(isEmpty(pkColName))
{
alert("主键字段名不能为空");
return;
}
if(isEmpty(colNames))
{
alert("数据表格显示列字段不能为空");
return;
}
if(isEmpty(colTitles))
{
alert("数据表格显示列标题不能为空");
return;
}
this.path = path;
this.sql = sql;
this.pkColName = pkColName;
this.colNames = colNames;
this.colTitles = colTitles;
this.colNamesArr = colNames.split(",");
this.colTitlesArr = colTitles.split(",");
this.likeFields = likeFields;
if(colNamesArr.length!=colTitlesArr.length)
{
alert("数据表格显示列标题与字段个数必须一致");
return;
}
queryDataList();
}
/**
* 点击查询
*/
function query_click()
{
likeWord = $("#likeWord").val();//模糊查询字
pageNumber = 1;
selectedObjs = new Array();
queryDataList();
}
/**
* 查询数据并构建数据表格
*/
function queryDataList()
{
$.ajax({
cache: true,
type: "POST",
dataType:"json",
url:"F7SelectQuery.jsp",
data:{sql:sql,pageSize:pageSize,pageNumber:pageNumber,pkColName:pkColName,likeFields:likeFields,likeWord:likeWord},
async: false,
error: function(request) {
alert("error");
},
success: function(data) {
if(data.code==0)
{
alert(data.msg);
}else
{
total = data.total;
totalPage = Math.ceil(total/pageSize);
$("#total").html(total);
$("#totalPage").html(totalPage);
$("#pageNumber").html(pageNumber);
createTable(data.data);
}
}
});
}
/**
* 根据返回的数据构建数据表格
* @param jsonList
*/
function createTable(jsonList)
{
$("#dataList").html("");
var t = ' <table style="width: 100%;" cellspacing="0" cellpadding="0">'
+'<thead>'
+'<tr style="height:25px;">'
+'<th style="width:35px;text-align: center;">选择</th>'
+'<th style="width:35px;">序号</th>';
for(var i=0;i<colTitlesArr.length;i++)
{
t = t+'<th>'+colTitlesArr[i]+'</th>';
}
t = t+' </tr>'
+' </thead>'
+' <tbody>';
var dataArr = eval(jsonList);
for(var i=0;i<dataArr.length;i++){
var json = eval(dataArr[i]);
var pkValue = json[pkColName];
var checked = "";
$.each(selectedObjs, function(i, o){
var pk = o[pkColName];
if(pkValue==pk)
{
checked = 'checked="checked"';
}
});
t = t+ ' <tr οnmοuseοver="style.backgroundColor=\'#B2CCE5\'" οnmοuseοut="style.backgroundColor=\''+(i%2==0?"#FFFFFF":"#ECF6F9")+'\'" style="background-color: '+(i%2==0?"#FFFFFF":"#ECF6F9")+'"> '
+' <td style="text-align: center;" name="pkColName"><input type="checkbox" name=\''+pkColName+'\' value="'+json[pkColName]+'" '+checked+' οnclick="checkbox_onclick(this)"/></td>'
+' <td style="text-align: center;" name="seq">'+(pageSize*(pageNumber-1)+(i+1))+'</td>';
for (var j=0;j<colNamesArr.length;j++)
{
var colName = colNamesArr[j];
var value = json[colName];
if(value=="null" || value==null)
{
value = " ";
}
t = t+'<td name="'+colName+'">'+value+'</td>';
}
t = t+'</tr>';
}
t = t+ ' </tbody>'
+' </table>';
$("#dataList").html(t);
}
/**
* 首页
*/
function firstPage()
{
pageNumber = 1;
queryDataList();
}
/**
* 上一页
*/
function previousPage()
{
if(pageNumber<=1)
{
alert("已经是第一页");
return;
}
pageNumber = pageNumber-1;
queryDataList();
}
/**
* 下一页
*/
function nextPage()
{
if(pageNumber>=totalPage)
{
alert("已经是最后一页");
return;
}
pageNumber = pageNumber+1;
queryDataList();
}
/**
* 最后一页
*/
function lastPage()
{
pageNumber = totalPage;
queryDataList();
}
/**
* 确定 返回选择的记录行数据给调用者
*/
function confirm()
{
if(selectedObjs.length==0)
{
alert("请选择记录");
return;
}
window.returnValue = arrayToJson(selectedObjs);
window.close();
}
/**
* 取消
*/
function cancel()
{
window.returnValue="";
window.close();
}
/**
* 选择/取消选择行记录,把选择中的行记录放到selectedObjs数据中
* @param obj
*/
function checkbox_onclick(obj)
{
var isExist = false;
var p = 0;
var v = $(obj).val();
$.each(selectedObjs, function(i, o){
var pk = o[pkColName];
if(v==pk)
{
isExist = true;
p = i;
return false;
}
});
if($(obj).is(":checked"))
{
if(!isExist)
{
var row = new Object();
eval('row.'+pkColName+' = "'+$(obj).val()+'"');
$.each($(obj).parent().nextAll(), function(i, o){
var value = $(o).html();
value = value.replace(/ /ig, "");
eval("row."+$(o).attr("name")+' = "'+value+'"');
});
selectedObjs.push(row);
}
}else
{
if(isExist)
{
selectedObjs.splice(p,1);
}
}
}
/**
* 把对象数组转换成JSONArray格式字符串
* @param o
* @returns
*/
function arrayToJson(o) {
var r = [];
if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
if (typeof o == "object") {
if (!o.sort) {
for (var i in o) r.push(i + ":" + arrayToJson(o[i]));
if ( !! document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
r.push("toString:" + o.toString.toString());
}
r = "{" + r.join() + "}";
} else {
for (var i = 0; i < o.length; i++) {
r.push(arrayToJson(o[i]));
}
r = "[" + r.join() + "]";
}
return r;
}
return o.toString();
}
/**
* 判断对象是否为空
* @param o
* @returns
*/
function isEmpty(o)
{
return o==null || o==undefined || o.replace(/(^s*)|(s*$)/g, "").length ==0;
}
5.后台sevlet:F7SelectQuery.jsp
<%@page import="java.util.*"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page contentType="text/html;charset=UTF-8" %>
<%@page import="com.costech.common.util.StringUtility"%>
<%@page import="com.costech.common.helper.BeanDataHelper"%>
<%@page import="com.costech.common.bean.SystemPath"%>
<%@page import="com.costech.common.constants.CommonConstants"%>
<%@page import="com.costech.common.service.ICommonService"%>
<%@page import="com.costech.common.helper.ServiceHelper"%>
<%
request.setCharacterEncoding("UTF-8");
try{
ICommonService gd = (ICommonService)ServiceHelper.getService(CommonConstants.COMMON_SERVICE);
//获取参数值
String sql = StringUtility.toStringValue(request.getParameter("sql"), "");
String pageSize = StringUtility.toStringValue(request.getParameter("pageSize"),"20");
String pageNumber = StringUtility.toStringValue(request.getParameter("pageNumber"),"1");
String pkColName = StringUtility.toStringValue(request.getParameter("pkColName"),"FileID");
String likeFields = StringUtility.toStringValue(request.getParameter("likeFields"),"");
String likeWord = StringUtility.toStringValue(request.getParameter("likeWord"),"");
if(StringUtility.isEmpty(sql))
{
throw new RuntimeException("查询sql语句为空");
}
if(StringUtility.isEmpty(pkColName))
{
throw new RuntimeException("主键字段名为空");
}
StringBuffer likeStr = new StringBuffer();
if(StringUtility.isNotEmpty(likeWord) && StringUtility.isNotEmpty(likeFields))
{
String[] likeFieldsArr = likeFields.split(",");
int j = 0;
for(int i=0;i<likeFieldsArr.length;i++)
{
String field = likeFieldsArr[i];
if(StringUtility.isEmpty(field))
{
continue;
}
if(j==0)
{
likeStr.append(" WHERE temp."+field+" LIKE '%"+likeWord+"%' ");
}else
{
likeStr.append(" OR temp."+field+" LIKE '%"+likeWord+"%' ");
}
j++;
}
}
StringBuffer querySql = new StringBuffer();
querySql.append(" SELECT TOP "+pageSize+" * ");
querySql.append(" FROM ");
querySql.append(" (SELECT * ");
querySql.append(" FROM ");
querySql.append(" ("+sql+") TEMP ");
querySql.append(" "+likeStr+" ) TEMP ");
querySql.append(" WHERE temp."+pkColName+" NOT IN ");
querySql.append(" (SELECT TOP "+(Integer.valueOf(pageSize)*(Integer.valueOf(pageNumber)-1))+" temp."+pkColName+" ");
querySql.append(" FROM ");
querySql.append(" (SELECT * ");
querySql.append(" FROM ");
querySql.append(" ("+sql+") TEMP ");
querySql.append(" "+likeStr+" ) TEMP) ");
List list = gd.getDataList(querySql.toString());
String jsonStr = "[]";
if(list!=null)
{
jsonStr = JSONArray.fromObject(list).toString();
}
String sqlCount = "select count(*) n from ("+sql+") temp "+likeStr;
String n = gd.getNameListBySql(sqlCount, "n", ";");
if(StringUtility.isEmpty(n))
{
n = "0";
}
JSONObject retJson = new JSONObject();
retJson.put("code", "1");
retJson.put("msg", "操作成功");
retJson.put("data", jsonStr);
retJson.put("total", n);
out.write(retJson.toString());
} catch (Exception e) {
e.printStackTrace();
JSONObject retJson = new JSONObject();
retJson.put("code", "0");
retJson.put("msg", e.getMessage());
retJson.put("data", "");
retJson.put("total", "0");
out.write(retJson.toString());
}
%>