最近公司網站新加入了一些類似表格的條目, 這些條目在新增時要驗證。如果要自己手寫驗證和一些javascript的document比較麻煩, 於是考慮用JqueryEasyui.JqueryEasyui依賴Jquery類庫。 是輕量級的UI組件. 驗證功能強大。 廢話少說 下面進入正題:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ taglib prefix="ww" uri="/webwork"%> <%@ page contentType="text/html;charset=UTF-8" language="java"%> <%@ taglib uri="gdp" prefix="gdp"%> <% String context = request.getContextPath(); String editFlag = request.getParameter("editFlag"); String cglxSqId = request.getParameter("fid"); String isDisabled = request.getParameter("isDisabled"); %> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>房屋資產登記</title> <link href="<%=context%>/gdp/css/layout2.css" rel="stylesheet" type="text/css" /> <link href="<%=context%>/easyui/themes/gray/easyui.css" rel="stylesheet" type="text/css" /> <script src="<%=context%>/easyui/jquery.min.js"></script> <script src="<%=context%>/easyui/jquery.easyui.min.js"></script> <script src="<%=context%>/easyui/jquery.easyui.patch.js"></script> <script src="<%=context%>/easyui/jquery.json-2.4.js"></script> <script src="<%=context%>/easyui/extend/easyui.extend.js"></script> <script src="<%=context%>/easyui/locale/easyui-lang-zh_CN.js"></script> </head> <body> <div class="catalog_main" > <div class="catalog_item"> <div class="catalog_item_body" style="height:230px; position:relative;"> <table id="dg" style="width:100%;"></table> <div class="asset_tools" id="dg_tools"> <a class="asssets_add" id="asssets_add" title="添加記錄"></a> <a class="asssets_del" id="asssets_del" title="刪除記錄"></a> </div> </div> </div> </div> <script> //擴展信息js變量 var $dg = $('#dg'); var $dg_tools = $('#dg_tools'); var selRowIndex = 0; var isEdit = false; $(function(){ //從查看頁面進來，不需要組件的任何事件 if(<%=isDisabled%>){ $('#asssets_add,#asssets_del').css({"display":"none"}); $dg.datagrid({ url : '<%=context%>/rmis/trade/purchase/purchaseTradeAction!toInsertDetail.action?cglxSqId=<%=cglxSqId %>', cls : 'sz_dg', singleSelect: true, onClickCell:function(index,field,value){//單擊grid列，顯示value alert(value); }, columns:[[ {field:'fid',hidden:true}, {field:'projectName',width:130,title:'名稱',halign:'center',editor:'text'}, {field:'ggxh',width:60,title:'規格型號',halign:'center',editor:'text'}, {field:'zyjscs',width:100,title:'主要技術參數',halign:'center',editor:'text'}, {field:'ckdj',width:60,halign:'center',align:'right',title:'參考單價',editor:{type:'numberbox'}}, {field:'cgsl',width:60,halign:'center',align:'right',title:'采購數量',editor:{type:'numberbox'}}, {field:'cgjehj',width:100,halign:'center',align:'right',title:'采購預算金額合計',editor:{type:'numberbox'}}, {field:'zjly',width:80,title:'資金來源',halign:'center',editor:'text'}, {field:'bz',width:75,title:'備注',halign:'center',editor:'text'} ]] }); //從新增或修改頁面進來，需要組件的一些事件 }else{ $dg.datagrid({ url : '<%=context%>/rmis/trade/purchase/purchaseTradeAction!toInsertDetail.action?cglxSqId=<%=cglxSqId %>', cls : 'sz_dg', singleSelect: true, onClickRow:function(index, row){//單擊grid行，顯示功能菜單 if(selRowIndex != index || !isEdit){ if(!$dg.datagrid('validateRow',selRowIndex)){//驗證不通過 $dg.datagrid('selectRow',selRowIndex); alert('本行數據驗證不通過，請檢查！'); return false; } $dg.datagrid('endEdit',selRowIndex); $dg.datagrid('beginEdit',index); $dg_tools.show().css('top',((index+1)*26)+'px'); } isEdit = true; selRowIndex = index; }, onBeginEdit:function(index, row){ bindGridEvent(index,'begin'); }, onLoadSuccess:function(data){ if(data.rows.length){//有一條以上數據 $dg.prev().find('.datagrid-body tr[datagrid-row-index]:first').click(); } else { gridNoData($dg,$dg_tools); } }, onLoadError:function(){ gridNoData($dg,$dg_tools); }, columns:[[ {field:'fid',hidden:true}, {field:'projectName',width:130,title:'名稱',halign:'center',editor:{type:'validatebox',options:{required:true}}}, {field:'ggxh',width:60,title:'規格型號',halign:'center',editor:'text'}, {field:'zyjscs',width:100,title:'主要技術參數',halign:'center',editor:'text'}, {field:'ckdj',width:60,halign:'center',align:'right',title:'參考單價', editor:{ type:'numberbox', options:{ onChange:function(newValue,oldValue){ setTimeout(function(){ bindGridEvent(newValue,'change'); },200); } } } }, {field:'cgsl',width:60,halign:'center',align:'right',title:'采購數量', editor:{ type:'numberbox', options:{ onChange:function(newValue,oldValue){ setTimeout(function(){ bindGridEvent(newValue,'change'); },200); } } } }, {field:'cgjehj',width:100,halign:'center',align:'right',title:'采購預算金額合計',editor:{type:'numberbox'}}, {field:'zjly',width:80,title:'資金來源',halign:'center',editor:'text'}, {field:'bz',width:75,title:'備注',halign:'center',editor:'text'} ]] }); function gridNoData(datagridObj,datagridTool){ datagridObj.datagrid('appendRow',{}); datagridObj.prev().find('.datagrid-body tr[datagrid-row-index]:first').click(); datagridTool.show().css('top','37px'); } $('#asssets_add').click(function(){//新增行 addRow($dg,selRowIndex); }); $('#asssets_del').click(function(){//刪除行 delRow($dg,selRowIndex,'assetExtendInfo'); }); //新增行 function addRow(datagridObj,selRowIndex){ if(!datagridObj.datagrid('validateRow',selRowIndex)){//驗證不通過 alert('本行數據驗證不通過，請檢查！'); return false; } datagridObj.datagrid('appendRow',{}); datagridObj.prev().find('.datagrid-body tr[datagrid-row-index]:last').click(); } //刪除行 function delRow(datagridObj,dgSelRowIndex,dgType){ datagridObj.datagrid('deleteRow',dgSelRowIndex); if(datagridObj.datagrid('getRows').length == 0){ selRowIndex=-1; }else{ datagridObj.prev().find('.datagrid-body tr[datagrid-row-index]:first').click(); } } } }); //獲取交易的項目列表信息[即填寫的信息] 轉成JSON字符串 function getFloorBaseInfos(){ if($dg.datagrid('validateRow',selRowIndex)){//驗證通過 $dg.datagrid('endEdit',selRowIndex); } var data = $dg.datagrid('getRows'); //過濾掉空的樓層信息，如無樓層信息，則返回"" var json = $.toJSON(data).replace(/\[{}\]|,{}|{},/g,""); return json; } // 給 采購預算金額合計 計算結果， 公式： 參考單價 * 采購數量 = 采購預算金額合計 function bindGridEvent(index,whay){ try{ if(whay == 'change'){// 編輯器onChange事件 var ckdj = $dg.datagrid('getEditor', {index:selRowIndex,field:'ckdj'}); // 參考單價 var ckdjVal = $(ckdj.target).numberbox('getValue'); var cgsl = $dg.datagrid('getEditor', {index:selRowIndex,field:'cgsl'}); // 采購數量 var cgslVal = $(cgsl.target).numberbox('getValue'); var cgjehj = $dg.datagrid('getEditor', {index:selRowIndex,field:'cgjehj'}); // 采購預算金額合計 $(cgjehj.target).numberbox('setValue',cgslVal*ckdjVal); }else if(whay == 'begin'){// 在一行進入編輯模式的時候觸發 selRowIndex = index; //var cgjehj = $dg.datagrid('getEditor', {index:selRowIndex,field:'cgjehj'}); // 采購預算金額合計 //$(cgjehj.target).numberbox('disable'); // 設置編輯器不可用 } }catch(e){ alert(e); } } </script> </body> </html>
上面 CSS/JS要改成你文件的路徑, getFloorBaseInfos(); 函數是點擊保存時獲取所填寫的內容.
新增頁面效果如下圖:
查看頁面效果如下圖:
