SpringMVC +mybatis+spring 結合easyui用法及常見問題總結
1.FormatString的用法.
2.用postAjaxFillGrid實現dataGrid 把form表單轉換成一個map對象傳入后台實現條件查詢.
Js代碼:
var oPage = {
pageIndex: 1,
pageSize: 20
};
postAjaxFillGrid('#FormID','${contextPath}/discountController/selectDiscount','#DataGridId', oPage);
參數說明: formID為查詢條件的form的Id屬性值,DataGridId為實現datagrid的Id屬性值.opage為設置顯示多少條.
Java代碼:
@ResponseBody
@RequestMapping(value = "/selectDiscount", method = RequestMethod.POST)
public DataGrid selectDiscount(@RequestBody ConditionEx condition){
Page<Discount> discountPage=discountService.selectDiscountPage(condition.getCondition(),
Integer.valueOf(condition.getPage().get("pageIndex").toString())-1,
Integer.valueOf(condition.getPage().get("pageSize").toString()));
return new DataGrid(discountPage);
}
參數說明:
method = RequestMethod.POST 設置為Post 必須設置
@RequestBody ConditionEx condition @RequestBody為前台傳過來的json字符串綁定到condition對象或者集合上.所以我們得到了數據
解析postAjaxFillGrid
function postAjaxFillGrid(formId,url,gridId){
var condition = $.serializeObject(formId);//通過formId把里面的數據轉換成json對象
jQuery.ajax({
type: 'POST',
contentType: 'application/json',
url: url,
data: jQuery.toJSON({condition: condition, page: oPage}),//把json對象轉換成json字符串
dataType: 'json',//按照json格式傳入后台
success: function (data) {
$(gridId).datagrid('loadData', data);
},
error: function (data) {
console.error("讀取數據失敗");
}
});
}
3.把form表單轉換成json對象.
$.serializeObject = function(form) {
var o = {};
$.each($(form).serializeArray(), function(index) {
if (o[this['name']]) {
o[this['name']] = o[this['name']] + "," + this['value'];
} else {
o[this['name']] = this['value'];
}
});
return o;
};
4.解析doPagination
DoPagination 為easyui默認分頁事件.調出可手動更改其方法.
5.excel報表導出實現
Js代碼:
function dataExport() {
var condition = $.serializeString('#searchForm');//把form表單數據轉換成字符串,url樣式
var url='${contextPath}/settlementController/exportSettlementReport'+condition;
$('#exportForm').attr('action',url);//替換form表單的action屬性值
$('#exportForm').submit();
}
$.serializeString = function(form) {
var o='';
var a = $(form).serializeArray();
var index=0;
$.each(a, function() {
if ($.trim(this.value) != '') {
if(index == 0){
o=o+'?'+this.name+'='+this.value
}else{
o=o+'&&'+this.name+'='+this.value
}
index++;
}
else{
if(index == 0){
o=o+'?'+this.name+'='+''
}else{
o=o+'&&'+this.name+'='+''
}
index++;
}
});
return o;
};
Java代碼:
@ResponseBody
@RequestMapping(value = "/exportSettlementReport", method = RequestMethod.POST)
public ModelAndView exportSettlementReport(@RequestParam Map<String ,Object> conditionx) {
List<Settlement> listResult=settlementService.selectDailySettlement(conditionx);
Map<String,Object> model = new HashMap<String, Object>();
model.put("data",listResult);
String organName=organServiceI.selectOrganByCode(listResult.get(0).getSubCode());
model.put("itemsName",organName);
SettlementExcelView excelView = new SettlementExcelView();
return new ModelAndView(excelView,model);
}
import bjnme.Lng.ibms.dto.Settlement;
import bjnme.Lng.ibms.utils.AbstractPOIExcelView;//引用類
import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.FileInputStream;
import java.util.List;
import java.util.Map;
public class SettlementExcelView extends AbstractPOIExcelView {
@Override
protected Workbook createWorkbook() throws Exception {
String path = this.getClass().getClassLoader().getResource("/").getPath();
// Biff8EncryptionKey.setCurrentUserPassword("123456");
Workbook workbook = new XSSFWorkbook(new FileInputStream(path + "excels/settlement.xlsx"));
return workbook;
}
@Override
protected void buildExcelDocument(Map<String, Object> model,
Workbook workbook, HttpServletRequest request, HttpServletResponse response)
throws Exception {
Sheet sheet = workbook.getSheet("總公司日結表");
CellStyle style = workbook.createCellStyle();
style.setBorderBottom(CellStyle.BORDER_THIN);
style.setBottomBorderColor(IndexedColors.BLACK.getIndex());
style.setBorderLeft(CellStyle.BORDER_THIN);
style.setLeftBorderColor(IndexedColors.BLACK.getIndex());
style.setBorderRight(CellStyle.BORDER_THIN);
style.setRightBorderColor(IndexedColors.BLACK.getIndex());
style.setBorderTop(CellStyle.BORDER_THIN);
style.setTopBorderColor(IndexedColors.BLACK.getIndex());
Font font = workbook.createFont();
font.setFontName("宋體");
font.setFontHeightInPoints((short) 9);
style.setFont(font);
style.setLocked(true);
List<Settlement> listResult = (List<Settlement>) model.get("data");
Row row = sheet.getRow(1);
row.getCell(0).setCellValue("單位:"+(String) model.get("itemsName"));
String time = String.format("時間:%1s-%2s",listResult.get(0).getStartTime(),listResult.get(0).getEndTime());
row.getCell(8).setCellValue(time);
int index = 5;//設置從第幾行開始填充
for (Settlement settlement : listResult) {
row = sheet.createRow(index);
//設置一共要填充多少列
for (int i = 0; i < 19; i++) {
row.createCell(i).setCellStyle(style);
}
//為每一列賦值
row.getCell(0).setCellValue(settlement.getId());
row.getCell(1).setCellValue(settlement.getSubCode());
row.getCell(2).setCellValue(settlement.getCardTypeCode());
row.getCell(3).setCellValue(settlement.getCardNo());
row.getCell(4).setCellValue(settlement.getUnit());
row.getCell(5).setCellValue(settlement.getLastBalance());
row.getCell(6).setCellValue(settlement.getLocalTotal());
row.getCell(7).setCellValue(settlement.getTotalRecharge());
row.getCell(8).setCellValue(settlement.getTotalPromotion());
row.getCell(9).setCellValue(settlement.getSumGasMakeUp());
row.getCell(10).setCellValue(settlement.getTotalBackDiff());
row.getCell(11).setCellValue(settlement.getRemoteRecharge());
row.getCell(12).setCellValue(settlement.getTotal());
row.getCell(13).setCellValue(settlement.getTotalTrade());
row.getCell(14).setCellValue(settlement.getRemoteTrade());
row.getCell(15).setCellValue(settlement.getRefund());
row.getCell(16).setCellValue(settlement.getCalcBalance());
row.getCell(17).setCellValue(settlement.getActualBalance());
row.getCell(18).setCellValue(settlement.getDiffBalance());
index++;
}
String filename = "總公司日結表.xlsx";//設置下載時客戶端Excel的名稱
if (request.getHeader("user-agent").contains("MSIE")) {
filename = java.net.URLEncoder.encode(filename, "utf-8");
} else {
filename = new String(filename.getBytes("utf-8"), "iso-8859-1");
}
response.setHeader("Content-disposition", "attachment;filename=" + filename);
}
參數說明:
@RequestParam用來獲得靜態的URL請求入參 spring注解時action里用到。就是把這個url參數封裝到map集合里面.
6. easyUI_動態改變datagrid的url值
$('#tt').datagrid({
url:'/demo/user/getUsers',
queryParams:{
id:'001',
state:'ok'
}
});
7. easyui dataGrid 動態添加列.
Js代碼:
<script>
$(function () {
$.getJSON('${pageContext.request.contextPath}/resources/json/datagrid_data.json',function(result){
var columns=new Array();
$.each(result.headers[0], function(i, field){
var column={};
column["title"]=i;
column["field"]=field;
column["width"]=50;
columns.push(column);//當需要formatter的時候自己添加就可以了,原理就是拼接字符串.
});
$('#tt').datagrid({
title:' XXX公司價差補差分配表',
height:500,
singleSelect:true,
url:'',
frozenColumns :[[
{field:'name',title:'項目',width:80,sortable:true,align:'center'},
{field:'count',title:'合計',width:150,sortable:true}
]],columns : [
columns
],
rownumbers:true}).datagrid('loadData',result.bodys);
});
})
</script>
<div title="XXX公司價差補差分配表" fit="true" border="false" style="height: 94%;">
<table id="tt" ></table>
</div>
Json代碼:
json 代碼格式.我這不用分頁 也就沒有total
{"headers":[
{"一月份":"Jan","二月份":"Feb"}
],"bodys":[
{"name":"LNG","count":"50000","Jan":"20000","Feb":"30000"}
]
}
8.easyui子頁面增加tab的實現方法
//dataGrid行雙擊時間,這個增加tab的例子是建立在行雙擊的基礎上面的
onDblClickRow:function(rowIndex, rowData){
addSubPage(“tab的名稱”,'${contextPath}/saleAnalysisController/showSaleAnalysis12',rowData.subCode)
}
//增加tab所需的方法
function addSubPage(title,url,subCode){
var jq = top.jQuery; //取得整個父頁面對象
var content='<iframe scrolling="auto" frameborder="0" src="'+url+'?subCode='+subCode+'" style="width:100%;height:100%;"></iframe>';
jq("#index_tabs").tabs('add',{
title:title,
content:content,
closable:true
});
}
9.模塊樹形導航的制作
類似這樣的
<script type="text/javascript">
function initMenus() {
<c:forEach items="${l2Menus}" var="parentMenu">
var tr = $("#tree" + ${parentMenu.resourceId});
tr.tree({
url: '${pageContext.request.contextPath}/resourceController/getResourceTree?l2Menu=' + ${parentMenu.resourceId},
idField: 'id',
parentField: 'pid',
textField: 'text',
onClick: function (node) {
if (node.attributes && node.attributes.url) {
var url;
var iframe;
if (node.attributes.url.indexOf('/') == 0) {
url = '${pageContext.request.contextPath}' + node.attributes.url;
} else {
url = node.attributes.url;
}
//iframe = '<iframe src="' + url + '" frameborder="0" style="border:0;width:100%;height:98%;" sandbox></iframe>';
iframe = '<iframe src="' + url + '" frameborder="0" style="border:0;width:100%;height:98%;"></iframe>';
var t = $('#index_tabs');
var opts = {
title: node.text,
closable: true,
iconCls: node.iconCls,
content: iframe,
border: false
};
if (t.tabs('exists', opts.title)) {
t.tabs('select', opts.title);
} else {
t.tabs('add', opts);
}
}
}
});
</c:forEach>
}
$(function () {
initMenus();
});
</script>
<div id="divMenus" class="easyui-accordion" data-options="fit:true,border:false">
<c:forEach items="${l2Menus}" var="parentMenu">
<div title="${parentMenu.resourceName}" data-options="iconCls:'icon icon-table-m'" class="nav_title">
<ul id="tree${parentMenu.resourceId}"></ul>
</div>
</c:forEach>
</div>
粉色部分其中${l2Menus}為在登錄成功后查出來的綜合管理系統下面的1級菜單.jstl標簽遍歷l2Menus這個集合,建立所有分類.每個分類里里面放一個ul,為了后面添加tree(樹形菜單)
棕色即為tree的具體構建,此時的url查出來的是這個資源下面的資源.形成樹.
10.datagrid合並單元格
Js代碼:
$(function(){
var nullData='{"rows":[{"code":"一班","name":"張三","age":"21"},{"code":"一班","name":"李四","age":"22"}]}';
var json=eval('(' + nullData + ')');
$('#hebing').datagrid({
height:300,
width:500,
singleSelect:true,
fitColumns:true,
data:json,
columns:[[
{field:'code',title:'班級',width:100},
{field:'name',title:'姓名',width:100},
{title:'年紀',field:'age',width:100}
]],
onLoadSuccess:function(data){
$('#hebing').datagrid('mergeCells',{
index:0,
field:'code',
rowspan:2
})
}
});
});
標紅部分為主要實現方法,調用其方法.index表示索引從第幾行開始 field 找到索引行的列 ,rowspan表示跨2行合並,也可以用colspan實現跨兩列實現.
11.datagrid擴展數據行鼠標懸停離開事件
可用於展示某列詳情使用
打開jquery.easyui.min.js 文件,根據datagrid-row-over關鍵字找到關鍵行
此處擴展onMouseOutRow事件 ,紅框內為要添加的代碼.
其中_52c和_53d 根據easyui不同版本 參數會有不同. 根據紅框上面數據改變.
代碼為:
//此處為添加的鼠標懸停事件
var row=opts.finder.getRow(_52c,_53d);
opts.onMouseOutRow.call(_52c,e,_53d,row);
//此處結束
此處擴展onMouseOverRow事件 ,紅框內為要添加的代碼.
同上
12.mybatis里面如何用LIKE模糊查詢
有兩種方法,建議用第一種
一,
<if test="param1.cardNo!=''">
and CARD_NO LIKE CONCAT(CONCAT('%', #{param1.cardNo, jdbcType=VARCHAR}),'%')
</if>
二,
<if test="param1.userName!=''">
USER_NAME like '%${param1.userName}%'
</if>
下面我們看看# 和 $ 區別,為什么要用第一種
- #將傳入的數據都當成一個字符串，會對自動傳入的數據加一個雙引號。如：order by #user_id#，如果傳入的值是111,那么解析成sql時的值為order by "111", 如果傳入的值是id，則解析成的sql為order by "id".
2. $將傳入的數據直接顯示生成在sql中。如：order by $user_id$，如果傳入的值是111,那么解析成sql時的值為order by user_id, 如果傳入的值是id，則解析成的sql為order by id.
3. #方式能夠很大程度防止sql注入。
4.$方式無法防止Sql注入。
5.$方式一般用於傳入數據庫對象，例如傳入表名.
6.一般能用#的就別用$.
MyBatis排序時使用order by 動態參數時需要注意，用$而不是#
字符串替換
默認情況下，使用#{}格式的語法會導致MyBatis創建預處理語句屬性並以它為背景設置安全的值（比如?）。這樣做很安全，很迅速也是首選做法，有時你只是想直接在SQL語句中插入一個不改變的字符串。比如，像ORDER BY，你可以這樣來使用：
ORDER BY ${columnName}
這里MyBatis不會修改或轉義字符串。
重要：接受從用戶輸出的內容並提供給語句中不變的字符串，這樣做是不安全的。這會導致潛在的SQL注入攻擊，因此你不應該允許用戶輸入這些字段，或者通常自行轉義並檢查。
所以在注重安全的情況下 我們用第一種,防止sql注入.