jquery Easyui表格 如何应用在JSP页面上
最近公司网站新加入了一些类似表格的条目, 这些条目在新增时要验证。如果要自己手写验证和一些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(); 函数是点击保存时获取所填写的内容.
新增页面效果如下图:
查看页面效果如下图:
