當前位置：
首頁 > 知識 > jqgrid 前後端交互實例

jqgrid 前後端交互實例

知識 01-20

首先,jqGrid 是一個用來顯示網格數據的jQuery插件，通過使用jqGrid可以輕鬆實現前端頁面與後台數據的ajax非同步通信。

一、jqGrid特性

基於jquery UI主題，開發者可以根據客戶要求更換不同的主題。

兼容目前所有流行的web瀏覽器。

Ajax分頁，可以控制每頁顯示的記錄數。

支持XML，JSON，數組形式的數據源。

提供豐富的選項配置及方法事件介面。

支持表格排序，支持拖動列、隱藏列。

支持滾動載入數據。

支持實時編輯保存數據內容。

支持子表格及樹形表格。

支持多語言。

目前是免費的。

二、jqGrid使用方式

首先，您需要到jqGrid官網下載最新版本的程序包，下載地址為：http://www.trirand.com/blog/?page_id=6

下載jqGrid皮膚，下載地址為：http://jqueryui.com/themeroller/

放在java項目的jquery目錄下,如下圖

使用是在jsp文件 引用<script src="<%=url%>/page/jquery/jqgrid.xmhj.js" type="text/javascript"></script>

具體用法可以參照官網中文網址:http://blog.mn886.net/jqGrid/ 基礎用法和例子都有

基礎例子 前端jsp文件: 有充值表:cy_cz 需要顯示欄位data_zd:id name KH ..... 通過url傳參 onSearch是需要查詢條件的 如以姓名name 卡號KH 模糊查詢

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

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%

String url_path = request.getContextPath();

String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + url_path + "/";

pageContext.setAttribute("url", url);

%>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="viewport" content="width=device-width,height=device-width, initial-scale=1 user-scalable=0"/>

<script src="<%=url%>/page/jquery/jqgrid.xmhj.js" type="text/javascript"></script>

<%@ include file="/page/include/JQMobile.jsp"%>

<title>表格</title>

<script>

//傳遞給伺服器用的參數

var post_data={

tablename: "cy_cz",

data_zd: "id,name,KH,JyType,JyRQ,dealtime,ssje,OldJE,NewJE,LsH,gonghao,bak",//顯示的數據

//data_name: "id,empid,name,checktime,type,jh,bak",//顯示的數據

sel_zd:" T.*,e.name,e.gonghao",//查詢的數據

page: "1",//默認頁數

rows: "10",//每頁記錄數

total: 0,//默認0

sidx : "JyRQ",//初始化的時候排序的欄位

sord : "desc",//排序方式,可選desc,asc

code: "string,string,string",//傳參類型--搜索時共用

codename: "e.name,KH,JyType",//傳參名

codevalue: " , ,2",//傳參值

lookup_table:"LEFT JOIN empinfo e on e.EmpId=T.empid"

};

setTimeout("showLoader()", 100);//這裡要延遲一下，直接調用無法顯示載入器

newsList();

function newsList(){

//ajax訪問資料庫

$.ajax({

url:"${url}jqgrid/getAjaxList?",

type: "post",

data : post_data,

dataType : "json",

success : function(data){

// {"page":"1","total":"0","records":"0","rows":[]}

//{"page":1,"total":3,"records":25,"rows":[{"id":"1","cell":["1","144","","刷卡禁止通過: 沒有許可權","2019-01-11","0","",""]}}]}

var page=data["page"];//第幾頁

var total=data["total"];//總頁數

var records=data["records"];//記錄數

if(records=="0"){

var obj=document.createElement("li");

obj.innerHTML="暫無任何數據！";

$("#ul_dataInfo").append(obj);

}

post_data.total=total;

var rows=data["rows"];//數據

for(var i=0;i<rows.length;i++){

//alert(rows[i]);

var cell=rows[i]["cell"];

var ids=cell[1];

var name=cell[2];

var KH=cell[3];

var dateTime=cell[5]+" "+cell[6];

var ssje=cell[7];

var NewJE=cell[9];var LsH=cell[10];

var gonghao=cell[11];var bak=cell[12];

/*

for(var j=0;j<cell.length;j++){

var obj=document.createElement("li");

obj.innerHTML="<a href="#">"+cell[j]+"</a>";

}

*/

var obj=document.createElement("li");

//給ul元素添加內容

//樣式1 單純內容

//obj.innerHTML=""+name+"";

//樣式2 基礎內容

//obj.innerHTML="<a href="#">"+name+"</a>";

//樣式3 氣泡數字

//obj.innerHTML="<a href="#">"+name+"<span class="ui-li-count">25</span></a>";

//樣式4 大標題加小標題

var mx_url="${url}jqgrid/getPage?url=/page/xfgl/czmxInfo.jsp&id="+ids+"&tableName=cy_cz";

/*obj.innerHTML="<a href=""+mx_url+""><p>"+name+"</p><p>"+KH+"</p><p>"+ssje+"元"+

"</p><p class="ui-li-aside"><strong>"+dateTime+"</strong></p></a>"; */

obj.innerHTML="<a href=""+mx_url+""><h2>"+name+" 充值金額:<font color="red">"+ssje+

"</font> 餘額:<font color="greed">"+NewJE+"</font></h2><p>"+"工號:"+gonghao+" 卡號:"+KH+" 流水號:"+LsH+

" 備註:"+bak+"</p><p class="ui-li-aside"><strong>"+dateTime+"</strong></p></a>";

//樣式5 圖片加內容

//obj.innerHTML="<a href="#">"+name+"</a>";

$("#ul_dataInfo").append(obj);

}

//刷新樣式，必須寫

$("#ul_dataInfo").listview("refresh");

//setTimeout("hideLoader()", 2000);//根據實際情況看是否需要增加延時

},

error: function(){

alert("請求失敗啦！");

setTimeout("hideLoader()", 100);

},

statusCode:{

"404":function(){

alert("404表示頁面沒有找到");

},

"500":function(){

alert("500表示伺服器內部錯誤");

},

"200":function(){

//alert("200表示請求成功");

setTimeout("hideLoader()", 100);

}

}

});

}

//點擊更多

function moreData(){

var page=post_data.page;

var total=post_data.total;

if(page<total){

post_data.page=++post_data.page;

setTimeout("showLoader()", 100);//這裡要延遲一下，直接調用無法顯示載入器

newsList();

}else{

alert("沒有更多記錄！");

}

}

//顯示載入器.for jQuery Mobile 1.2.0

function showLoader() {

$.mobile.loading("show", {

text: "正在載入中...", //載入器中顯示的文字

textVisible: true, //是否顯示文字

theme: "a", //載入器主題樣式a-e

textonly: false, //是否只顯示文字

html: "" //要顯示的html內容，如圖片等

});

}

//隱藏載入器.for jQuery Mobile 1.2.0

function hideLoader() {

$.mobile.loading("hide");

}

//搜索事件

function onSearch(val){

//alert(val);

$("#ul_dataInfo li").remove();

post_data.page=1;

post_data.code="string,string";

post_data.codename="e.name,JyType";

post_data.codevalue=""+val+",,2";

setTimeout("showLoader()", 100);//這裡要延遲一下，直接調用無法顯示載入器

newsList();

}

</script>

</head>

<body>

<div data-role="page" >

<div data-role="header">

<a href="#" onClick="javascript :history.back(-1);" data-role="button">返回</a>

<a href="${url}jqgrid/addPage?url=/page/xfgl/czInfoEdit.jsp&tableName=cy_cz" data-role="button">新增</a>

<h1>充值記錄</h1>

</div>

<div data-role="content" stylex="margin:0px;padding:0px">

<input type="search" name="search" id="search_bar" value="" placeholder="搜索姓名..." onchange="onSearch(this.value);"/>

<ul id="ul_dataInfo" data-role="listview" data-inset="true" >

</ul>

</div>

<div data-role="footer">

<a href="#" onClick="moreData()" stylex="width:90%;margin-left:1%" class="ui-btn ui-shadow ui-corner-all" data-role="button">更多....</a>

</div>

</div>

</body>

</html>

後台java控制器: getPageList() 獲取分頁數據 getAjaxList() json數據通過ajax交互8

package com.aicard.controller;

import java.sql.Timestamp;

import java.text.SimpleDateFormat;

import java.util.Collection;

import java.util.Date;

import java.util.List;

import java.util.Map;

import java.util.Set;

import com.jfinal.core.Controller;

import com.jfinal.plugin.activerecord.Db;

import com.jfinal.plugin.activerecord.Record;

import com.baseDev.jdbc.JDBO;

import com.baseDev.conn.Dpc;

import com.aicard.conn.PageModel;

public class JqGridController extends Controller {

public void getPageList(){

String tablename = this.getPara("tablename");

String code = this.getPara("code");

String codeval = this.getPara("codevalue");

String codename = this.getPara("codename");

String lookup_table = this.getPara("lookup_table");

int count = 0;

Dpc dpc = new Dpc();

String sqlfrom = " FROM "+tablename+" T " ;

String sql=" where 1=1 ";

String sql2= " where 1=1 ";

if(lookup_table!=null&&!lookup_table.equals("")){

if(lookup_table.indexOf("where")>-1||lookup_table.indexOf("WHERE")>-1){

sql2= " ";

}

}

if(code!=null&&code!=""){

String strs[]=code.split(",");

String name[]=codename.split(",");

String val[]=codeval.split(",");

for(int i=0;i<strs.length;i++){

String str=strs[i];

if(val[i]!=null&&(val[i].equals("all")||val[i].equals(" "))){

continue;

}

String sqq=sql;

boolean flag=false;

if(name[i]!=null){

String names=name[i];

if(names.indexOf(".")>-1){

if(names.indexOf("T.")>-1){

}else{

sqq= sql2;

flag=true;

}

}

}

if(str!=null&&str.equals("string")){

sqq = sqq + " AND "+name[i]+" like "%"+val[i]+"%" ";

}else if(str!=null&&str.equals("string2")){

sqq = sqq + " AND "+name[i]+" = ""+val[i]+"" ";

}else if(str!=null&&str.equals("int")){

sqq = sqq + " AND "+name[i]+" = "+val[i]+" ";

}else if(str!=null&&str.equals("double")){

sqq = sqq + " AND "+name[i]+" = "+val[i]+" ";

}else if(str!=null&&str.equals("date")){

sqq = sqq + " and DATE_FORMAT("+name[i]+","yyyy-MM-dd") = "" + val[i] + "" ";

}else if(str!=null&&str.equals("datef")){

sqq = sqq + " and DATE_FORMAT("+name[i]+","yyyy-MM-dd") >= "" + val[i] + "" ";

}else if(str!=null&&str.equals("datet")){

sqq = sqq + " and DATE_FORMAT("+name[i]+","yyyy-MM-dd") <= "" + val[i] + "" ";

}

if(flag){

sql2=sqq;

}else{

sql=sqq;

}

}

}

String resultset="{"page":"1","total":"0","records":"0","rows":[]}";

String orderby = "";

String data_zd = this.getPara("data_zd");

String sel_zd = this.getPara("sel_zd");

String page = this.getPara("page");

String sidx = this.getPara("sidx");

String sord = this.getPara("sord");

String rows = this.getPara("rows");

orderby = " ORDER BY " + sidx + " " +sord;

count = JDBO.DataCount(" SELECT "+sel_zd+" FROM (SELECT T.* " + sqlfrom + sql + ") T " + lookup_table + " "+ sql2 );

if(count>0){

dpc = DpcYes(count,Integer.valueOf(rows));

dpc.setCurrentPage(Integer.valueOf(page));

resultset= JDBO.JqPage(dpc, " SELECT "+sel_zd+" FROM (SELECT T.* " + sqlfrom + sql + ") T " + lookup_table + " "+ sql2 + orderby,data_zd);

}

this.renderJson(resultset);

}

public void getAjaxList(){

String tablename = this.getPara("tablename");

String code = this.getPara("code");

String codeval = this.getPara("codevalue");

String codename = this.getPara("codename");

String lookup_table = this.getPara("lookup_table");

int count = 0;

Dpc dpc = new Dpc();

String sqlfrom = " FROM "+tablename+" T " ;

String sql=" where 1=1 ";

String sql2= " where 1=1 ";

if(lookup_table!=null&&!lookup_table.equals("")){

if(lookup_table.indexOf("where")>-1||lookup_table.indexOf("WHERE")>-1){

sql2= " ";

}

}

if(code!=null&&code!=""){

String strs[]=code.split(",");

String name[]=codename.split(",");

String val[]=codeval.split(",");

for(int i=0;i<strs.length;i++){

String str=strs[i];

if(val[i]!=null&&(val[i].equals("all")||val[i].equals(" "))){

continue;

}

String sqq=sql;

boolean flag=false;

if(name[i]!=null){

String names=name[i];

if(names.indexOf(".")>-1){

if(names.indexOf("T.")>-1){

}else{

sqq= sql2;

flag=true;

}

}

}

if(str!=null&&str.equals("string")){

sqq = sqq + " AND "+name[i]+" like "%"+val[i]+"%" ";

}else if(str!=null&&str.equals("string2")){

sql = sqq + " AND "+name[i]+" = ""+val[i]+"" ";

}else if(str!=null&&str.equals("int")){

sqq = sqq + " AND "+name[i]+" = "+val[i]+" ";

}else if(str!=null&&str.equals("double")){

sqq = sqq + " AND "+name[i]+" = "+val[i]+" ";

}else if(str!=null&&str.equals("date")){

sqq = sqq + " and date_format("+name[i]+","yyyy-MM-dd") = "" + val[i] + "" ";

}else if(str!=null&&str.equals("datef")){

sqq = sqq + " and date_format("+name[i]+","yyyy-MM-dd") >= "" + val[i] + "" ";

}else if(str!=null&&str.equals("datet")){

sqq = sqq + " and date_format("+name[i]+","yyyy-MM-dd") <= "" + val[i] + "" ";

}

if(flag){

sql2=sqq;

}else{

sql=sqq;

}

}

}

String resultset="{"page":"1","total":"0","records":"0","rows":[]}";

String orderby = "";

String data_zd = this.getPara("data_zd");

String sel_zd = this.getPara("sel_zd");

String page = this.getPara("page");

String sidx = this.getPara("sidx");

String sord = this.getPara("sord");

String rows = this.getPara("rows");

orderby = " ORDER BY " + sidx + " " +sord;

count = JDBO.DataCount(" SELECT "+sel_zd+" FROM (SELECT T.* " + sqlfrom + sql + ") T " + lookup_table + " "+ sql2 );

if(count>0){

dpc = DpcYes(count,Integer.valueOf(rows));

dpc.setCurrentPage(Integer.valueOf(page));

resultset= JDBO.JqPage(dpc, " SELECT "+sel_zd+" FROM (SELECT T.* " + sqlfrom + sql + ") T " + lookup_table + " "+ sql2 + orderby,data_zd);

}

this.renderJson(resultset);

}

public void getPage(){

String url=this.getPara("url");

String id=this.getPara("id");

String tableName=this.getPara("tableName");

if(tableName!=null&&!tableName.equals("")){

Record pojo = Db.findById(tableName,id);

this.setAttr("pojo", pojo);

}

this.setAttr("id", id);

this.render(url);

}

public void addPage(){

String url=this.getPara("url");

String id=this.getPara("id");

String tableName=this.getPara("tableName");

if(tableName!=null&&!tableName.equals("")&&id!=null&&!id.equals("")){

Record pojo = Db.findById(tableName,id);

this.setAttr("pojo", pojo);

}

this.setAttr("id", id);

this.setAttr("tableName", tableName);

this.render(url);

}

public void savePage(){

String url=this.getPara("url");

String id=this.getPara("id");

String tableName=this.getPara("tablename");

if(tableName!=null&&!tableName.equals("")){

this.renderText("-1");

}

Record pojo = new Record();

Record rd=null;

if(tableName!=null&&!tableName.equals("")&&id!=null&&!id.equals("")){

rd = Db.findById(tableName,id);

if(rd!=null)

pojo=rd;

}

String code = this.getPara("code");

String codeval = this.getPara("codevalue");

String codename = this.getPara("codename");

if(code!=null&&code!=""){

String strs[]=code.split(",");

String name[]=codename.split(",");

String val[]=codeval.split(",");

for(int i=0;i<strs.length;i++){

String str=strs[i];

if(val[i]==null){

continue;

}

if(str=="date"||str.equalsIgnoreCase("date")){

pojo.set(name[i],Timestamp.valueOf(val[i]));

}else{

pojo.set(name[i],val[i]);

}

}

}

boolean result=false;

if(rd!=null){

result=Db.update(tableName, pojo);

}else{

result=Db.save(tableName, pojo);

}

if(result)

this.renderText("1");

else

this.renderText("0");

}

//操作提示

public void Msg(String statusCode,String message,String callbackType,String rel){

this.setAttr("statusCode", statusCode);

this.setAttr("message", message);

this.setAttr("callbackType", callbackType); //closeCurrent

this.setAttr("rel", rel); //closeCurrent

this.render("/public/ajaxDone.jsp");

}

//操作提示

public void MsgAll(

String statusCode,

String message,

String navTabId,

String rel,

String callbackType,

String forwardUrl,

String confirmMsg)

{

this.setAttr("statusCode", statusCode);

this.setAttr("message", message);

this.setAttr("navTabId", navTabId); //navTabId

this.setAttr("rel", rel); //rel

this.setAttr("callbackType", callbackType); //closeCurrent

this.setAttr("forwardUrl", forwardUrl); //forwardUrl

this.setAttr("confirmMsg", confirmMsg); //confirmMsg

this.render("/public/ajaxDone.jsp");

}

//列表值為空時，默認分頁值

public Dpc DpcNo(){

Dpc dpc = new Dpc();

int numPerPage = 20;

try{

numPerPage = Integer.valueOf(this.getPara("numPerPage"));

}

catch(Exception e){

numPerPage = 20;

}

dpc.setAllCount(0);

dpc.setCurrentPage(1);

dpc.setNumPerPage(numPerPage);

dpc.setPageCount(0);

return dpc;

}

//列表值不為空時，默認分頁值

public Dpc DpcYes(int allcount){

Dpc dpc = new Dpc();

int numPerPage = 20; //每頁記錄

int CurrentPage = 1; //當前頁

int PageCount = 1; //總頁數

//每頁記錄

try{

numPerPage = Integer.valueOf(this.getPara("numPerPage"));

}

catch(Exception e){

numPerPage = 20;

}

if(numPerPage==0)

numPerPage = 20;

//當前頁

try{

CurrentPage = Integer.valueOf(this.getPara("pageNum"));

}catch(Exception e){

CurrentPage = 1;

}

if(CurrentPage==0)

CurrentPage = 1;

//總頁數

PageCount = (allcount + numPerPage - 1)/numPerPage;

dpc.setAllCount(allcount);

dpc.setCurrentPage(CurrentPage);

dpc.setNumPerPage(numPerPage);

dpc.setPageCount(PageCount);

return dpc;

}

//列表值不為空時，默認分頁值帶參數

public Dpc DpcYes(int allcount,int numPerPage){

Dpc dpc = new Dpc();

dpc.setAllCount(allcount);

dpc.setCurrentPage(PageModel.StringToInt(this.getPara("pageNum"), 1));

dpc.setNumPerPage(PageModel.StringToInt(this.getPara("numPerPage"),numPerPage));

dpc.setPageCount((allcount+dpc.getNumPerPage() - 1)/dpc.getNumPerPage());

return dpc;

}

//數據列表分頁

public List<Record> Page(Dpc dpc,String sql){

List<Record> page = JDBO.oraclePage(dpc, sql);

return page;

}

//數據列表分頁

public List<Record> getTask(){

List<Record> pojosTask = null;

pojosTask = Db.find("select * from TASK_TYPE t order by t.DISP_ORDER");

return pojosTask;

}

}

頁面效果如下:

該功能是要用於微信端的 網頁看起來較丑,使用了jfinal框架 ,引入jqGrid 和 jqGridMobile.

後台的代碼寫得有些亂，還有待優化。

---------------------

作者：java coder

原文：https://blog.csdn.net/zhq505824802/article/details/86527903

版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

jqgrid 前後端交互實例

打開今日頭條，查看更多圖片
喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

※C和C++的區別和聯繫（擴展知識）
※jQuery實現動態給table賦值的方法示例

TAG:程序員小新人學習 |