要 COOL就酷到底- -dojo data grid 2
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>酒店房型管理--</title> <jsp:include page="./sHead.jsp" /> <link rel="stylesheet" type="text/css" href="css/grid.css" mce_href="css/grid.css" /> <mce:script type="text/javascript"><!-- //,cacheBust:(new Date()).getTime() djConfig = { isDebug : true, parseOnLoad : true }; var hotelId = ${hotelId} // --></mce:script> <mce:script type="text/javascript" src="../libs/dojo1.4.x/dojo/dojo.js" mce_src="libs/dojo1.4.x/dojo/dojo.js"></mce:script> <mce:script type="text/javascript" src="js/hotelRoomTab.js" mce_src="js/hotelRoomTab.js"></mce:script> </head> <body class="soria"> <div dojoType="dijit.Dialog" id="cDialog" title="编辑客房" class="myDialog" style="width: 368px;"> <table style="width: 100%;"> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> 客房类型： </label> </td> <td> <select name="roomType" id="roomType" dojoType="dijit.form.ComboBox" autocomplete="false" value="豪华单人房" onChange="setVal1" invalidMessage="客房类型必须选择!"> <option selected="selected" value="标准单人房"> 标准单人房 </option> <option value="豪华单人房"> 豪华单人房 </option> <option> 豪华双人房 </option> <option> 标准双人房 </option> </select> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> 门市价： </label> </td> <td> <input id="price" dojoType="dijit.form.NumberSpinner" value="0.0" constraints="{min:0.0,max:9156}" size="16" maxlength="26" required="true" promptMessage="请输入门市价." invalidMessage="门市价填写填写错误!"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> 周一价： </label> </td> <td> <input id="mondayPrice" dojoType="dijit.form.NumberTextBox" size="16" maxlength="46" promptMessage="请输入周一价." invalidMessage="周一价填写错误!"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> 周二价： </label> </td> <td> <input id="tuesdayPrice" dojoType="dijit.form.NumberTextBox" size="16" maxlength="46" promptMessage="请输入周二价." invalidMessage="周二价填写错误!"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> 周三价： </label> </td> <td> <input id="wednesdayPrice" dojoType="dijit.form.NumberTextBox" size="16" maxlength="46" promptMessage="请输入周三价." invalidMessage="周三价填写错误!"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> 床型： </label> </td> <td> <select name="bed" id="bed" dojoType="dijit.form.ComboBox" autocomplete="false" value="双人床" onChange="setVal2"> <option selected="selected"> 双人床 </option> <option> 单人床 </option> <option> 圆床 </option> <option> 日式豪华大床 </option> </select> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> 早餐： </label> </td> <td> <input id="breakfast" dojoType="dijit.form.CheckBox" size="16" maxlength="46" promptMessage="请选择是否有早餐.选中表示有早餐"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> 宽带： </label> </td> <td> <!-- <label for="wideBand1">有<input type="radio" onChange="setWideBandVal" name="wide_band" id="wideBand1" dojoType="dijit.form.RadioButton"/></label> <label for="wideBand2">无<input type="radio" onChange="setWideBandVal" name="wide_band" id="wideBand2" dojoType="dijit.form.RadioButton"/></label> --> <input id="wide_band" dojoType="dijit.form.CheckBox" onChange="setWideBandVal" size="16" maxlength="46" promptMessage="请选择是否有宽带.选中表示有宽带"> </td> </tr> <tr> <td colspan="2" style="text-align: center;" mce_style="text-align: center;"> <button dojoType="dijit.form.Button" iconClass="mailIconOk" type="submit" jsId="saveBtn"> 保存 </button> <button dojoType="dijit.form.Button" iconClass="mailIconCancel" type="submit"> 放弃 </button> </td> </tr> </table> </div> <div class="myBody"> <jsp:include page="title.jsp" /> <div id="grid" jsId="grid" class="myGrid" style="height: 16em;"> <button jsId="addBtn" dojoType="dijit.form.Button"> 添加 </button> <button jsId="delBtn" dojoType="dijit.form.Button"> 删除 </button> <!-- <button jsId="updateGasket" dojoType="dijit.form.Button"> 更新排序 </button> --> <button dojoType="dijit.form.Button" jsId="selectAll"> 选择全部 </button> <button dojoType="dijit.form.Button" jsId="deselectAll"> 取消全选 </button> <div id="rowCount"></div> </div> </div> </body> </html>
javascript
hotelRoomTab.js
dojo.require("dijit.form.Button"); dojo.require("dojox.grid.EnhancedGrid"); dojo.require("management.grid.PageTable"); dojo.require("dojo.data.ItemFileWriteStore"); dojo.require("dijit.Editor"); dojo.require("dojox.grid.cells.dijit"); dojo.require("dijit.Dialog"); var roomTypeVal = "标准单人房"; var bedVal = "双人床"; var wideBandVal = false; var setVal1 = function() { console.info(this.value); roomTypeVal = this.value; } var setVal2 = function() { bedVal = this.value; } var setWideBandVal = function() { wideBandVal = this.checked } var formatDate = function(inDatum) { return dojo.date.locale.format(new Date(inDatum), this.constraint); }; var formatCurrency = function(inDatum) { return isNaN(inDatum) ? '.' : dojo.currency .format(inDatum, this.constraint); }; var formatBoolean = function(inDatum) { // console.info(inDatum); return inDatum ? '有' : "无"; }; var noscrollLayout = { //ID 和标题不滚动 noscroll : true, cells : [ { name : '标识', field : 'id', width : 4 }, { name : '客房类型', field : 'roomType', width : 16, editable : true, type : dojox.grid.cells.ComboBox, options : [ "标准单人房", "豪华单人房", "豪华双人房", "标准双人房" ] } ] }; var priceLayout = { defaultCell : { editable : true, styles : 'text-align: left;padding:3px;', type : dojox.grid.cells._Widget }, rows : [ { name : '门市价', field : 'price', formatter : formatCurrency, width : "126px", widgetClass : dijit.form.NumberTextBox, styles : 'text-align:right;', // constraints:{min:1.00,max:9999.99,places:1} editorOptions : { min : 1.00, max : 9999.99, places : 2 }, widgetProps : { min : 5.00, max : 9999.99, places : 2 } }, { name : '周一价', field : 'mondayPrice', width : "12em", formatter : formatCurrency, widgetClass : dijit.form.NumberTextBox, editorOptions : { min : 1.00, max : 9999.99, places : 2 } }, { name : '周<b>二</b>价', field : 'tuesdayPrice', width : "12em", formatter : formatCurrency, widgetClass : dijit.form.NumberTextBox, editorOptions : { min : 1.00, max : 9999.99, places : 2 } }, { name : '周三价', field : 'wednesdayPrice', width : "12em", formatter : formatCurrency, widgetClass : dijit.form.NumberTextBox, editorOptions : { min : 1.00, max : 9999.99, places : 2 } }, { name : '床型', field : 'bed', width : "12em", type : dojox.grid.cells.ComboBox, options : [ "日式豪华大床", "双人床", "单人床", "圆床" ], width : 12 }, { name : '宽带上网', field : 'wide_band', width : "8em", formatter : formatBoolean, type : dojox.grid.cells.CheckBox }, { name : '早餐', field : 'breakfast', formatter : formatBoolean, type : dojox.grid.cells.CheckBox } ] }; var layout = [ noscrollLayout, priceLayout ]; var myStore = new dojo.data.ItemFileWriteStore( { url : "hotelRoomManager.action?hotelId=" + hotelId }); // 参数集+追加ID management.grid.PageTable dojox.grid.DataGrid // dojox.grid.EnhancedGrid var grid = new dojox.grid.EnhancedGrid( { query : { id : '*' }, queryOptions : { id : '*', title : 'title' || 'name' }, store : myStore, onComplete : function(_items) { console.log("fetched:", myStore.items); }, structure : layout, rowsPerPage : 20, clientSort : true, rowSelector : "20px", // 自动高宽 // autoHeight:true, // autoWidth:true, // 页面大小,显示6条记录 pageSize : 16, plugins : { nestedSorting : true, dnd : true, indirectSelection : true } }, 'div'); dojo.addOnLoad(function() { dojo.byId('grid').appendChild(grid.domNode); grid.startup(); dojo.connect(myStore, "onSet", onSet); dojo.connect(addBtn, "onClick", "doAddRow"); dojo.connect(delBtn, "onClick", "delRow"); dojo.connect(selectAll, "onClick", function() { grid.rowSelectCell.toggleAllSelection(true); }); dojo.connect(deselectAll, "onClick", function() { grid.rowSelectCell.toggleAllSelection(false); }); dojo.connect(saveBtn, "onClick", "addRow"); }); function delRow() { var items = grid.selection.getSelected(); // console.debug("删除条目长度: " + items.length); if (items.length) { var ids = []; dojo.forEach(items, function(selectedItem, i) { if (selectedItem !== null) { // console.debug(i + "删除条目2: " + selectedItem.id); ids[i] = selectedItem.id; } // end if }); // end forEach console.debug("提交到服务器---ID数组: " + ids + " 长度: " + ids.length); if (ids.length == 0) return; if (confirm("您确定要删除当前选中的房型吗？")) { dojo .xhrGet( { url : "removeRoom.action?ids=" + ids, handleAs : 'json', contentType : "application/x-www-form-urlencoded; charset=utf-8", handle : function(response) { grid.removeSelectedRows(); } }); } } } function onSet(/* ,data */item, attribute, oldValue, newValue) { console.debug("条目 属性：" + item.id); if (oldValue != newValue) { // myStore.setValue(); console.debug("属性有变动：" + attribute + " 原值： " + oldValue + " 到新值： " + newValue); var p = { roomId : item.id, attribute : attribute, val : newValue }; dojo.xhrPost( { url : "updateRoom.action", content : p, handleAs : 'json', contentType : "application/x-www-form-urlencoded; charset=utf-8" }); } } function doAddRow() { // dojo.byId("addRoom").reset(); dijit.byId("price").setValue(""); dijit.byId("mondayPrice").setValue(""); dijit.byId("tuesdayPrice").setValue(""); dijit.byId("wednesdayPrice").setValue(""); dijit.byId("breakfast").setValue(""); dijit.byId("cDialog").show(); } // onSet onNew function addRow() { var cPrice = dijit.byId("price").getValue(); if (!isNaN(cPrice)) { cPrice = dijit.byId("price").getValue(); console .info("1 " + cPrice + " - " + dijit.byId("price").getValue() != "NaN"); } else { cPrice = 0; console .info("2 " + cPrice + " - " + dijit.byId("price").getValue() == "NaN"); } var p = { roomId : 0, roomType : roomTypeVal,// dijit.byId('roomType').getValue(), price : cPrice, mondayPrice : isNaN(dijit.byId("mondayPrice").getValue()) ? 0 : dijit .byId("mondayPrice").getValue(), tuesdayPrice : isNaN(dijit.byId("tuesdayPrice").getValue()) ? 0 : dijit .byId("tuesdayPrice").getValue(), wednesdayPrice : isNaN(dijit.byId("wednesdayPrice").getValue()) ? 0 : dijit.byId("wednesdayPrice").getValue(), bed : bedVal,// dijit.byId("bed").getValue(), wide_band : wideBandVal,// dijit.byId("breakfast").getValue(), breakfast : dijit.byId("breakfast").getValue(), hotelId : hotelId }; dojo.xhrGet( { encoding : 'UTF-8', url : "editRoom.action", content : p, handleAs : 'json', // contentType : "application/x-www-form-urlencoded; charset=utf-8", handle : function(response) { // alert(response.id); p.id = response["roomId"]; myStore.newItem(p); console.debug("添加新条目: " + grid.rowCount); }, error : function(err) { alert("提交错误" + err); } }); }
struts 配置及action
struts配置返回注意是json就可以了
import java.util.ArrayList; import java.util.List; import org.apache.struts2.json.annotations.JSON; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import com.flexoa.hibernate.HotelRoomManager; import com.flexoa.model.RoomTabulation; import com.flexoa.struts.BaseAction; public class HotelRoomAction extends BaseAction{ private static final long serialVersionUID = 1L; private final Logger logger = LoggerFactory.getLogger(this.getClass() .getName()); private HotelRoomManager hotelRoomManager; private List<RoomTabulation> items = new ArrayList<RoomTabulation>(); private Integer hotelId; private String ids; private Integer roomId; private String roomType; private double price; private double mondayPrice; private double tuesdayPrice; private double wednesdayPrice; private String bed; private String wide_band; private String breakfast; private String attribute; private String val; private RoomTabulation model ; @Override public String execute() throws Exception { items = hotelRoomManager.findRoots(hotelId, offset, pageSize); logger.info("/nroom size: "+items.size()+" /nHotel ID: "+hotelId+" /noffset "+offset+" -pagesize: "+pageSize); return SUCCESS; } public String saveOrUpdate() throws Exception { model = new RoomTabulation(); model.setBed(bed); model.setBreakfast(breakfast); model.setMondayPrice(mondayPrice); model.setPrice(price); model.setRoomType(roomType); model.setTuesdayPrice(tuesdayPrice); model.setWednesdayPrice(wednesdayPrice); model.setWide_band(wide_band); if(roomId!=0) model.setId(roomId); hotelRoomManager.saveOrUpdate(model, hotelId); logger.info("添加成功 Hotel ID: "+hotelId); setRoomId(model.getId()); return SUCCESS; } public String delete() throws Exception { hotelRoomManager.delete(ids); logger.info(" ID 组 : "+ids ); return SUCCESS; } public String update() throws Exception { logger.info(" attribute : "+attribute ); logger.info(" val : "+val ); logger.info(" ID : " + roomId ); hotelRoomManager.update(attribute, val, roomId); return SUCCESS; } /*****************GET SET 略 不需要返回的用 @JSON(serialize=false)屏蔽 *******************/ }
给出返回的JSON示例：
{"bed":null,"breakfast":null,"items":[{"bed":"双人床","breakfast":"","hotel":{"address":"","area":"东西湖区","city":"武汉","classId":9,"content":"<p><strong>uploadfile//png//go-bottom.png<//strong>上传成功!<//p>","createTime":null,"enterpriseAccount":null,"id":2,"imgUrl":"//uploadfile//png//go-bottom.png","indexCommen":null,"keyword":null,"name":"酒店名称","pageCommen":null,"pagePath":null,"passage":0.0,"province":"湖北","rating":0,"sortingCode":7,"status":0,"telephone":null},"id":1,"mondayPrice":0.0,"price":0.0,"roomType":"标准单人房","tuesdayPrice":0.0,"wednesdayPrice":0.0,"wide_band":"false"},{"bed":"双人床","breakfast":"","hotel":{"address":"","area":"东西湖区","city":"武汉","classId":9,"content":"<p><strong>uploadfile//png//go-bottom.png<//strong>上传成功!<//p>","createTime":null,"enterpriseAccount":null,"id":2,"imgUrl":"//uploadfile//png//go-bottom.png","indexCommen":null,"keyword":null,"name":"酒店名称","pageCommen":null,"pagePath":null,"passage":0.0,"province":"湖北","rating":0,"sortingCode":7,"status":0,"telephone":null},"id":2,"mondayPrice":33.0,"price":65.0,"roomType":"标准双人房","tuesdayPrice":32.0,"wednesdayPrice":31.0,"wide_band":"true"},{"bed":"泰式大圆床","breakfast":"","hotel":{"address":"","area":"东西湖区","city":"武汉","classId":9,"content":"<p><strong>uploadfile//png//go-bottom.png<//strong>上传成功!<//p>","createTime":null,"enterpriseAccount":null,"id":2,"imgUrl":"//uploadfile//png//go-bottom.png","indexCommen":null,"keyword":null,"name":"酒店名称","pageCommen":null,"pagePath":null,"passage":0.0,"province":"湖北","rating":0,"sortingCode":7,"status":0,"telephone":null},"id":3,"mondayPrice":0.0,"price":0.0,"roomType":"标准双人房","tuesdayPrice":0.0,"wednesdayPrice":0.0,"wide_band":"false"}],"mondayPrice":0.0,"price":0.0,"roomId":null,"roomType":null,"tuesdayPrice":0.0,"wednesdayPrice":0.0,"wide_band":null}
hibernate略