jquery flexigrid for java增删查改完整示例--前台
没有时间整一个只带flexigrid插件的示例,有时间了,再好好给整理出来,在这个前台里,增删查改全部都在这个页面操作了,采用DIV弹窗的方式,这种方式写前台代码有点头疼,以后再改进改进,把页面分开比较好.
前台页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<%
String path = request.getContextPath();
%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="<%=path %>/skins/blue/css/public.css" />
<link type="text/css" rel="stylesheet" href="<%=path %>/skins/blue/css/jquerydivbox.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/skins/blue/css/flexigrid/flexigrid.css" />
<script type="text/javascript" src="<%=path %>/skins/blue/common/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/skins/blue/common/jquery/flexigrid.js"></script>
<script type="text/javascript" src="<%=path %>/skins/blue/common/jquery/jquery-ui-personalized.js"></script>
<script type="text/javascript" src="<%=path %>/skins/blue/common/jquery/jquery.blockUI.js"></script>
<script type="text/javascript" src="<%=path %>/skins/blue/common/calendar/wdatePicker.js"></script>
<script type="text/javascript" src="<%=path %>/skins/blue/common/jquery/jquery.bgiframe.js"></script>
<script type="text/javascript" src="<%=path %>/skins/blue/js/jquerydivbox.js"></script>
<script type="text/javascript" src="<%=path %>/fckeditor/fckeditor.js"></script>
</head>
<body>
<!-- 查询区开始 -->
<form id="sform">
<table width="100%" class="searchTable">
<tr>
<td class="searchTdTitle" colspan="6">论文库管理</td>
</tr>
<tr>
<td class="searchTdText">题名</td>
<td class="searchTdInput"><input type="text" name="papTitle" id="papTitle" /></td>
<td class="searchTdText">副标题</td>
<td class="searchTdInput"><input type="text" name="papTitleS" id="papTitleS" /></td>
<td class="searchTdText">作者</td>
<td class="searchTdInput"><input type="text" name="papAuthor" id="papAuthor" /></td>
</tr>
<tr>
<td class="searchTdText">关键词</td>
<td class="searchTdInput"><input type="text" name="papKeyword" id="papKeyword" /></td>
<td class="searchTdText">摘要</td>
<td class="searchTdInput"><input type="text" name="papAbstract" id="papAbstract" /></td>
<td class="searchTdText">作者单位</td>
<td class="searchTdInput"><input type="text" name="papDepart" id="papDepart" /></td>
</tr>
<tr>
<td class="searchTdButton" colspan="6"><input type="submit" class="wsbutton" value="查 询" onMouseOver="this.className='wsbutton_hover'" onMouseOut="this.className='wsbutton'"></td>
</tr>
</table>
</form>
<!-- 查询区结束 -->
<!-- 列表区开始 -->
<table id="datalist" style="display: none"></table>
<script type="text/javascript">
$("#datalist").flexigrid({
colModel : [
{display: '序号', name : 'id', width : 50, sortable : false, align: 'left'},
{display: '题名', name : 'papTitle', width : 150, sortable : true, align: 'left'},
{display: '作者', name : 'papAuthor', width : 100, sortable : true, align: 'left'},
{display: '期刊', name : 'papJourney', width : 100, sortable : true, align: 'left'},
{display: '发表日期', name : 'papPubtime', width : $(window).width()-462, sortable : true, align: 'left'}
],
buttons : [
{name :'添加',bclass:'add',onpress:action},
{name :'修改',bclass:'edit',onpress:action},
{name :'删除',bclass:'delete',onpress:action},
{separator : true}
],
url: '<%=path%>/blPaper.do?action=findByAll',
method:'POST',//数据传送模式
dataType :'json',//回传数据的类型,可以为xml和json
sortname :"papTitle",//预设指定哪列进行排序
sortorder :"desc",//预设排序的方式
usepager :true,//是否启用分页器
title :'论文库列表',//标题
useRp :true,//使用分页大小选择器
rp :10,//resultsperpage,预设的分页大小
striped:true,//奇偶行颜色相互交叉,不设置默认为true
showTableToggleBtn :true,//显示或关闭隐藏栏位的开启器
width: 'auto',
height :278,//表格高度(注意不能使用100%之类的字符串)
resizable:false,//是否可调整列表窗口大小,不设置默认为true
onSubmit :addFormData,//数据提交时调用的自定义函数
nowrap:true,//是否重叠,true为不启用重叠,flase为启用重叠
procmsg:'资料读取中,请稍后......',//读取时的信息
pagestat:'显示从{from}到{to}条数据，共有{total}条数据',//分页器的显示信息
nomsg:'打不到符合条件的数据'//没有数据时的信息
});
function addFormData() {
var dt = $('#sform').serializeArray();
$("#datalist").flexOptions( {
params :dt
});
return true;
}
$('#sform').submit( function() {
$('#datalist').flexOptions( {
newp :1
}).flexReload();
return false;
});
//新增,修改,删除操作
function action(com, grid) {
if (com=='删除') {
if ($(".trSelected").length > 0) {
if (confirm('是否删除 ' + $('.trSelected', grid).length + ' 条记录吗?')) {
var id = "";
for (var i = 0; i < $('.trSelected', grid).length; i++) {
if(i<$('.trSelected', grid).length-1){
id += "id=" + $('.trSelected').eq(i).attr('id').substring(3) + "&";
}else if(i==$('.trSelected', grid).length-1){
id += "id=" + $('.trSelected').eq(i).attr('id').substring(3);
}
}
$.blockUI({ message: '<div class="showMsg">正在删除中,请稍等....</div>' });
$.get("<%=path%>/blPaper.do?action=delete&" + id, function(data, status, Request){
$(".showMsg").html(data);
})
}
} else {
alert("请选择某行删除！");
}
} else if (com=='添加') {
//新增弹窗操作
$.jquerydivboxs.open('#addbox',{width:800,height:450,title:'论文添加'});
} else if (com=='修改') {
//修改弹窗操作
if($('.trSelected', grid).length==1){
var id='0';
for (var i = 0; i < $('.trSelected', grid).length; i++) {
id=$('.trSelected').eq(i).attr('id').substring(3)
}
var url="<%=path%>/blPaper.do?action=findById&id="+id;
$.getJSON(
url,
function(data){
$("#papIdEdit").attr("value", data.papId);
$("#papTitleEdit").attr("value", data.papTitle);
$("#papTitleSEdit").attr("value", data.papTitleS);
if(data.papTop==1){
$('input[name=papTopEdit]').get(0).checked = true;
}else if(data.papTop==0){
$('input[name=papTopEdit]').get(1).checked = true;
}
if(data.papPublish==1){
$('input[name=papPublishEdit]').get(0).checked = true;
}else if(data.papPublish==0){
$('input[name=papPublishEdit]').get(1).checked = true;
}
if(data.papDownload==1){
$('input[name=papDownloadEdit]').get(0).checked = true;
}else if(data.papDownload==0){
$('input[name=papDownloadEdit]').get(1).checked = true;
}
FCKeditorAPI.GetInstance('papTextEdit').SetHTML(data.papText);
}
);
$.jquerydivboxs.open('#editbox',{width:800,height:450,title:'论文修改'});
}else{
alert("请只选择一行!");
}
}
}
//新增操作
function insertAction(){
var papTitle=$("#papTitleAdd").val();
var papTitleS=$("#papTitleSAdd").val();
var papText=FCKeditorAPI.GetInstance("papTextAdd").EditorDocument.body.innerHTML;
var papTop=$("input[name='papTopAdd']:checked").val();
var papPublish=$("input[name='papPublishAdd']:checked").val();
var papDownload=$("input[name='papDownloadAdd']:checked").val();
var sendData="papTitle="+ encodeURIComponent(papTitle)+"&papTitleS="+encodeURIComponent(papTitleS);
sendData=sendData+"&papAuthor="+encodeURIComponent(papAuthor)+"&papAuthorF="+encodeURIComponent(papAuthorF);
sendData=sendData+"&papDepart="+encodeURIComponent(papDepart)+"&papKeyword="+encodeURIComponent(papKeyword);
sendData=sendData+"&papAbstract="+encodeURIComponent(papAbstract)+"&papPubtime="+encodeURIComponent(papPubtime);
sendData=sendData+"&papVolum="+encodeURIComponent(papVolum)+"&papJourney="+encodeURIComponent(papJourney);
sendData=sendData+"&papPages="+encodeURIComponent(papPages)+"&papSupport="+encodeURIComponent(papSupport);
sendData=sendData+"&papText="+encodeURIComponent(papText)+"&papTop="+encodeURIComponent(papTop);
sendData=sendData+"&papPublish="+encodeURIComponent(papPublish)+"&papDownload="+encodeURIComponent(papDownload);
$.blockUI({ message: "<div class='showMsg'>数据添加中,请稍后...</div> "});
$.ajax({
url: "<%=path%>/blPaper.do?action=add",
type:'post', //数据发送方式
dataType:'html', //接受数据格式
data: sendData ,
success: function(data){ $(".showMsg").html(data); }
});
}
//修改操作
function updateAction(){
var papId=$("#papIdEdit").val();
var papAddman=$("#papAddmanEdit").val();
var papAddtime=$('#papAddtimeEdit').val();
var papTitle=$("#papTitleEdit").val();
var papTitleS=$("#papTitleSEdit").val();
var papText=FCKeditorAPI.GetInstance("papTextEdit").EditorDocument.body.innerHTML;
var papTop=$("input[name='papTopEdit']:checked").val();
var papPublish=$("input[name='papPublishEdit']:checked").val();
var papDownload=$("input[name='papDownloadEdit']:checked").val();
var sendData="papId="+ encodeURIComponent(papId)+"&papTitle="+ encodeURIComponent(papTitle)+"&papTitleS="+encodeURIComponent(papTitleS);
sendData=sendData+"&papAuthor="+encodeURIComponent(papAuthor)+"&papAuthorF="+encodeURIComponent(papAuthorF);
sendData=sendData+"&papDepart="+encodeURIComponent(papDepart)+"&papKeyword="+encodeURIComponent(papKeyword);
sendData=sendData+"&papAbstract="+encodeURIComponent(papAbstract)+"&papPubtime="+encodeURIComponent(papPubtime);
sendData=sendData+"&papVolum="+encodeURIComponent(papVolum)+"&papJourney="+encodeURIComponent(papJourney);
sendData=sendData+"&papPages="+encodeURIComponent(papPages)+"&papSupport="+encodeURIComponent(papSupport);
sendData=sendData+"&papText="+encodeURIComponent(papText)+"&papTop="+encodeURIComponent(papTop);
sendData=sendData+"&papPublish="+encodeURIComponent(papPublish)+"&papDownload="+encodeURIComponent(papDownload);
sendData=sendData+"&papAddman="+encodeURIComponent(papAddman)+"&papAddtime="+encodeURIComponent(papAddtime);
$.blockUI({ message: "<div class='showMsg'>数据修改中,请稍后...</div> "});
$.ajax({
url: "<%=path%>/blPaper.do?action=update",
type:'post', //数据发送方式
dataType:'html', //接受数据格式
data: sendData ,
success: function(data){ $(".showMsg").html(data); }
});
}
//打开详细页面
function openDetail(id){
$('#detailshow').empty();
$.jquerydivboxs.open('#detailbox',{width:800,height:450,title:'论文详情'});
var url="<%=path%>/blPaper.do?action=findById&id="+id;
$.getJSON(
url,
function(data){
var papTop="";
var papPublish="";
var papDownload="";
if(data.papTop==1){
papTop="是";
}else if(data.papTop==0){
papTop="否";
}
if(data.papPublish==1){
papPublish="是";
}else if(data.papPublish==0){
papPublish="否";
}
if(data.papDownload==1){
papDownload="是";
}else if(data.papDownload==0){
papDownload="否";
}
var html='<div class="newsShow">';
html+='<table class="divTable" align="center">';
html+=' <tr>';
html+=' <td class="divLeftTd">题名</td>';
html+=' <td colspan="3" class="divRightTd">'+data.papTitle+'</td>';
html+=' </tr>';
html+=' <tr>';
html+=' <td class="divLeftTd">副标题</td>';
html+=' <td colspan="3" class="divRightTd">'+data.papTitleS+'</td>';
html+=' </tr>';
html+=' <tr>';
html+=' <td class="divLeftTd">全文</td>';
html+=' <td colspan="3" class="divRightTd">'+data.papText+'</td>';
html+=' </tr>';
html+=' <tr>';
html+=' <td class="divLeftTd">全文附件</td>';
html+=' <td colspan="3" class="divRightTd"></td>';
html+=' </tr>';
html+=' <tr>';
html+=' <td class="divLeftTd">置顶</td>';
html+=' <td class="divRightTd">'+papTop+'</td>';
html+=' <td class="divLeftTd">是否发布</td>';
html+=' <td class="divRightTd">'+papPublish+'</td>';
html+=' </tr>';
html+=' <tr>';
html+=' <td class="divLeftTd">是否允许下载</td>';
html+=' <td class="divRightTd">'+papDownload+'</td>';
html+=' <td class="divLeftTd"> </td>';
html+=' <td class="divRightTd"> </td>';
html+=' </tr>';
html+='</table>';
html+='</div>';
$('#newsShow').append($(html));
}
);
}
</script>
<!-- 列表区结束 -->
<!--新增页面DIV窗口开始-->
<div id="addbox" style="display:none">
<form method="post">
<table class="divTable" align="center">
<tr>
<td class="divTdText">题名</td>
<td class="divTdInput" colspan="3"><input type="text" name="papTitleAdd" id="papTitleAdd" style="width:536px;" /></td>
</tr>
<tr>
<td class="divTdText">副标题</td>
<td class="divTdInput" colspan="3"><input type="text" name="papTitleSAdd" id="papTitleSAdd" style="width:536px;" /></td>
</tr>
<tr>
<td class="divTdText">作者</td>
<td class="divTdInput"><input type="text" name="papAuthorAdd" id="papAuthorAdd" /></td>
<td class="divTdText">第一作者</td>
<td class="divTdInput"><input type="text" name="papAuthorFAdd" id="papAuthorFAdd" /></td>
</tr>
<tr>
<td class="divTdText">全文</td>
<td class="divTdInput" colspan="3">
<FCK:editor instanceName="papTextAdd">
<jsp:attribute name="value"></jsp:attribute>
</FCK:editor>
</td>
</tr>
<tr>
<td class="divTdText">全文附件</td>
<td class="divTdInput" colspan="3"><input type="button" class="wsbutton" value="附件上传" onMouseOver="this.className='wsbutton_hover'" onMouseOut="this.className='wsbutton'" οnclick="$.jquerydivboxs.open('#fileupload',{width:600,height:200,title:'附件上传'});"></td>
</tr>
<tr>
<td class="divTdText">是否置顶</td>
<td class="divTdInput">是<input class="radioInput" name="papTopAdd" type="radio" value="1" />否<input class="radioInput" name="papTopAdd" type="radio" value="0" checked /></td>
<td class="divTdText">是否发布</td>
<td class="divTdInput">是<input class="radioInput" name="papPublishAdd" type="radio" value="1" checked />否<input class="radioInput" name="papPublishAdd" type="radio" value="0" /></td>
</tr>
<tr>
<td class="divTdText">是否允许下载</td>
<td class="divTdInput">是<input class="radioInput" name="papDownloadAdd" type="radio" value="1" checked />否<input class="radioInput" name="papDownloadAdd" type="radio" value="0" /></td>
<td class="divTdText"></td>
<td class="divTdInput"></td>
</tr>
<tr>
<td class="divTdButton" align="center" colspan="4">
<input type="button" class="dialog-ok" value="保 存" onMouseOver="this.className='wsbutton_hover'" onMouseOut="this.className='wsbutton'" onClick="insertAction()">
<input type="button" class="dialog-cancel" value="取 消" onMouseOver="this.className='wsbutton_hover'" onMouseOut="this.className='wsbutton'">
</td>
</tr>
</table>
</form>
</div>
<!--新增页面DIV窗口结束-->
<!--修改页面DIV窗口开始-->
<div id="editbox" style="display:none">
<form method="post">
<input type="hidden" name="papIdEdit" id="papIdEdit" />
<input type="hidden" name="papAddmanEdit" id="papAddmanEdit" />
<input type="hidden" name="papAddtimeEdit" id="papAddtimeEdit" />
<table class="divTable" align="center">
<tr>
<td class="divTdText">题名</td>
<td class="divTdInput" colspan="3"><input type="text" name="papTitleEdit" id="papTitleEdit" style="width:536px;" /></td>
</tr>
<tr>
<td class="divTdText">副标题</td>
<td class="divTdInput" colspan="3"><input type="text" name="papTitleSEdit" id="papTitleSEdit" style="width:536px;" /></td>
</tr>
<tr>
<td class="divTdText">全文</td>
<td class="divTdInput" colspan="3">
<FCK:editor instanceName="papTextEdit">
<jsp:attribute name="value"></jsp:attribute>
</FCK:editor>
</td>
</tr>
<tr>
<td class="divTdText">全文附件</td>
<td class="divTdInput" colspan="3"><input type="button" class="wsbutton" value="附件上传" onMouseOver="this.className='wsbutton_hover'" onMouseOut="this.className='wsbutton'" οnclick="$.jquerydivboxs.open('#fileupload',{width:600,height:200,title:'附件上传'});"></td>
</tr>
<tr>
<td class="divTdText">是否置顶</td>
<td class="divTdInput">是<input class="radioInput" name="papTopEdit" type="radio" value="1" />否<input class="radioInput" name="papTopEdit" type="radio" value="0" /></td>
<td class="divTdText">是否发布</td>
<td class="divTdInput">是<input class="radioInput" name="papPublishEdit" type="radio" value="1" />否<input class="radioInput" name="papPublishEdit" type="radio" value="0" /></td>
</tr>
<tr>
<td class="divTdText">是否允许下载</td>
<td class="divTdInput">是<input class="radioInput" name="papDownloadEdit" type="radio" value="1" />否<input class="radioInput" name="papDownloadEdit" type="radio" value="0" /></td>
<td class="divTdText"></td>
<td class="divTdInput"></td>
</tr>
<tr>
<td class="divTdButton" align="center" colspan="4">
<input type="button" class="dialog-ok" value="保 存" onMouseOver="this.className='wsbutton_hover'" onMouseOut="this.className='wsbutton'" onClick="updateAction()">
<input type="button" class="dialog-cancel" value="取 消" onMouseOver="this.className='wsbutton_hover'" onMouseOut="this.className='wsbutton'">
</td>
</tr>
</table>
</form>
</div>
<!--修改页面DIV窗口结束-->
<!--详细页面DIV窗口开始-->
<div id="detailbox" style="display:none">
<div id="newsShow"></div>
</div>
<!--详细页面DIV窗口结束-->
</body>
</html>
后台代码示例,有时间再整出来,这段前台代码里面有的不是flexigrid的,是弹窗DIV和TAB的,可以当个参考,以后有时间了,再把整个前台和后台的代码都发出来