要 COOL就酷到底- -dojo data grid 2

发布时间：2020-12-16 21:49:55 所属栏目：百科来源：网络整理

导读：html: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"htmlheadmeta http-equiv="content-type" content="text/html; charset=UTF-8" /title酒店房型管理--/titlejsp:include page="./sHead.jsp" /link rel="stylesheet" type="text/css" hr

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"></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>  <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 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,places : 2 } },{ name : '周一价',field : 'mondayPrice',width : "12em",editorOptions : { min : 1.00,{ name : '周<b>二</b>价',field : 'tuesdayPrice',{ name : '周三价',field : 'wednesdayPrice',{ name : '床型',field : 'bed',options : [ "日式豪华大床","双人床","单人床","圆床" ],width : 12 },{ name : '宽带上网',field : 'wide_band',width : "8em",formatter : formatBoolean,type : dojox.grid.cells.CheckBox },{ name : '早餐',field : 'breakfast',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,"delRow"); dojo.connect(selectAll,function() { grid.rowSelectCell.toggleAllSelection(true); }); dojo.connect(deselectAll,function() { grid.rowSelectCell.toggleAllSelection(false); }); dojo.connect(saveBtn,"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,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",// 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":"双人床","mondayPrice":33.0,"price":65.0,"roomType":"标准双人房","tuesdayPrice":32.0,"wednesdayPrice":31.0,"wide_band":"true"},{"bed":"泰式大圆床","id":3,"wide_band":"false"}],"roomId":null,"roomType":null,"wide_band":null}

hibernate略

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!