jquery flexigrid for java增删查改完整示例--前台

最新推荐文章于 2017-04-05 15:10:36 发布

小博

最新推荐文章于 2017-04-05 15:10:36 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： jquery java class input html path

jquery 专栏收录该内容

76 篇文章 0 订阅

订阅专栏

没有时间整一个只带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 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 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 id="detailbox" style="display:none">
<div id="newsShow"></div>
</div>

</body>
</html>

后台代码示例,有时间再整出来,这段前台代码里面有的不是flexigrid的,是弹窗DIV和TAB的,可以当个参考,以后有时间了,再把整个前台和后台的代码都发出来

小博

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery flexigrid for java增删查改完整示例--前台

没有时间整一个只带flexigrid插件的示例,有时间了,再好好给整理出来,在这个前台里,增删查改全部都在这个页面操作了,采用DIV弹窗的方式,这种方式写前台代码有点头疼,以后再改进改进,把页面分开比较好.前台页面代码:http://java.fckeditor.net" prefix="FCK" %>String path = request.getContextPath()
复制链接

扫一扫

专栏目录