easyui載入遠程資料庫資料庫資料庫_請問jquery easyui里的dialog怎麼樣可以實現載入一個頁面（該頁面返回資料庫的數據）

㈠ easyui涓鑳戒粠鏁版嵁搴撲腑寰楀埌鏁版嵁錛屼負浠涔堜笉鑳藉啀tree涓鏄劇ず錛

鍙鑳芥槸鍥犱負浣犵殑鏁版嵁鏍煎紡涓婃湁闂棰橈紱

榪欎釜鏄瀹樼綉涓婂箃ree鏁版嵁緇撴瀯鐨勫睘鎬ф弿榪幫紝浣犵殑鏁版嵁緙哄皯涓涓鈥渋d鈥濆睘鎬э紝鑰屽畼緗戜笂瀵笽D鐨勬弿榪版槸錛氣渋d瀵逛簬鍔犺澆榪滅▼鏁版嵁寰堥噸瑕佲濄備綘鐨勯〉闈涓婃湁娌℃湁鎶ヤ粈涔堥敊璇鍟婏紵

㈡ easyUI的表格如何顯示資料庫里的數據啊

因為EasyUI DataGrid只要取出後台傳過來的一定格式的jsON數據，就可以在前台頁面數據表格中，以一定形式顯示資料庫中的數據。此處，我們使用Struts2框架整合DataGrid，實現數據的顯示。

一、頁面內容

為了在頁面中顯示資料庫中欄位內容，需要定義一個table，通過EasyUI內部設計，自動顯示數據，如下：

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

<%@ taglib prefix="s" uri="/struts-tags" %>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>房產信息管理</title>

</head>

<body>

$(document).ready(function(){

//datagrid設置

$('#housesManage').datagrid({

title:'房產列表', //表格標題

iconCls:'icon-list', //表格圖標

nowrap: false, //是否只顯示一行，即文本過多是否省略部分。

striped: true,

fitColumns:true, //防止水平滾動

scrollbarSize:0, //去掉右側滾動條列

url:"houses/showHouses!show", //action地址

idField:'id',

collapsible:false,//是否可折疊的

singleSelect:true,//只能單選

frozenColumns:[[

{field:'ck',checkbox:true}

]],

pagination:true, //包含分頁

pageSize: 10,

pageList: [10,20,30],//可以設置每頁記錄條數的列表

rownumbers:true,

singleSelect:true,//只能單選

columns :[[{

field : 'id',

title : 'ID',

align:'center',

hidden : true

},{

field : 'unitNum',

title : "樓棟號",

width : 100,

align:'center',

sortable : true,

},{

field : 'doorCard',

title : "門牌號",

width : 100,

align:'center',

sortable : true,

},{

field : 'roomArea',

title : "房屋面積(平米)",

width : 100,

align:'center',

sortable : true,

},{

field : 'buildTime',

title : "建築時間",

width : 150,

align:'center',

sortable : true,

},{

field : 'isUse',

title : "使用狀態",

width : 80,

align:'center',

sortable : true,

formatter: function(value,row,index){

if(value=="0"){

return '已使用';

}else{

return '<font color="red">空置</font>';

}

}]],

toolbar:[{

text:'添加',

iconCls:'icon-add',

handler:function(){

//顯示上傳界面

$('#addHouse').dialog({

title: '房產管理|添加房屋信息',

width: 500,

iconCls:'icon-add',

height: 300,

closed: false,

cache: false,

href: 'houses/addHouse.jsp',

modal: true

});

}

}, '-', {

text: "刪除",

iconCls: "icon-cut",

handler: function () {

//選中要修改刪除的行

var rows = $("#housesManage").datagrid('getSelections'); //返回所有選中的行

if (rows.length > 0) {//選中幾行的話觸發事件

$.messager.confirm("提示", "您確定要重置該用戶密碼嗎？", function (res) {//提示是否刪除

if (res) {

//獲得編號

var id=rows[0].id;

// 獲得刪除行索引

var tableindex = $("#housesManage").datagrid('getRowIndex', id);

$.post('houses/delHouse!delete',{

"house.id":id

},function(data){

if(data.message=="2"){

$.messager.alert('溫馨提示','刪除失敗!','error');

}else{

//刪除選中的行

$("#housesManage").datagrid("deleteRow",tableindex);

}

});

}

});

}

},'-',{

text: "修改",

iconCls: "icon-edit",

handler: function (){

//選中要修改刪除的行

var rows = $("#housesManage").datagrid('getSelections'); //返回所有選中的行

if (rows.length > 0) {//選中幾行的話觸發事件

//獲得編號

var id=rows[0].id;

//顯示修改界面

$('#updateHouse').dialog({

title: '房產管理|修改房屋信息',

width: 500,

iconCls:'icon-edit',

height: 300,

closed: false,

cache: false,

href: 'houses/getHouse!get?house.id='+id,

modal: true

});

}

},'-',{

text: "刷新列表",

iconCls: "icon-reload",

handler: function (){

$("#housesManage").datagrid('reload');

}

}] ,onLoadError : function() {

$.messager.alert('溫馨提示','數據載入失敗!','error');

}

});

displayMsg();

});

//改變分頁顯示

function displayMsg() {

$('#housesManage').datagrid('getPager').pagination({

displayMsg : '當前顯示<font color="red"> {from} - {to} </font>條記錄共 <font color="red">{total}</font> 條記錄'

});

}

</script>

</body>

</html>

二、struts.xml中配置

<param name="root">result</param>

</result>

</action>

三、對應的Action 處理類

private JSONObject result; //返回的json

private String rows; //每頁顯示的記錄數

private String page; //當前第幾頁

//顯示房產基本信息

public String show(){

//當前頁

int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);

//每頁顯示條數

int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows);

//每頁的開始記錄第一頁為1 第二頁為number +1

int start = (intPage-1)*number;

HouseDao houseDao=new HouseDao();

ArrayList<THouse> listHouses=houseDao.getHouses(start, number); //從資料庫中查詢數據

Map<String, Object> jsonMap = new HashMap<String, Object>();//定義map

int count=houseDao.getHouseCount(); //求出總記錄數

//total鍵存放總記錄數，必須的

jsonMap.put("total", count);

jsonMap.put("rows", listHouses);//rows鍵存放每頁記錄 list

result=JSONObject.fromObject(CommonUtil.getJsonNotNull(jsonMap));

return SUCCESS;

}

action 類中，rows，page 是用於EasyUI分頁操作的，EasyUI會自動向後台傳入參數：當前頁及每頁顯示記錄數，以此實現分頁功能，此處只需要定義這兩個變數即可。

{"total":5,"rows":[{"doorCard":"1-1101","id":22,"roomArea":"140","unitNum":1,"tusers":[],"isUse":"1","buildTime":"2015-04-01"},{"doorCard":"1-1202","id":29,"roomArea":"160","unitNum":1,"tusers":[],"isUse":"0","buildTime":"2015-04-06"},{"doorCard":"2-2202","id":28,"roomArea":"160","unitNum":2,"tusers":[],"isUse":"0","buildTime":"2015-04-06"},{"doorCard":"3-3301","id":26,"roomArea":"150","unitNum":3,"tusers":[],"isUse":"1","buildTime":"2015-04-13"},{"doorCard":"3-2102","id":27,"roomArea":"160","unitNum":3,"tusers":[],"isUse":"1","buildTime":"2015-04-06"}]}

五、效果截圖

㈢ jQuery EasyUI- DataGrid使用從資料庫查詢得到數據顯示在前台的jsp頁面，如何實現

1、首先寫入導出按鈕和需要導出的datagrid列表。

㈣請問jquery easyui里的dialog，怎麼樣可以實現載入一個頁面（該頁面返回資料庫的數據）

如果彈出框里的頁面ajax載入資料庫彈出框里內嵌iframe。如果是頁面跳轉載入數據，就使用ajax把那個頁面抓取過來，然後使用dom寫到彈出框

㈤ jquery easyui combobox如何動態載入.json數據

easyui combobox
2種數據載入方式，一種是本地，可以直接載入本地json文件；
1種是遠程載入，通過設置url地址，這個url地址，你可以使用jquery 的ajax 技術直接去調用 web servive,

導航:首頁 > 編程大全 > easyui載入遠程資料庫資料庫資料庫

easyui載入遠程資料庫資料庫資料庫

與easyui載入遠程資料庫資料庫資料庫相關的資料

友情鏈接