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>