弹出子修改页面

<script type="text/javascript">
var dataGrid;
    $(function() {
        dataGrid = $('#dataGrid').datagrid({
            url : '${pageContext.request.contextPath}/Controller/Controller对应的方法名dataGrid',
            //fit : true,
            fitColumns : true,自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
            //border : false,
            pagination : true,在 datagrid 的底部显示分页栏。
            idField : 标识字段 '对应ID',
            pageSize : ,每页显示的数据数目
            pageList : [ , , , ,  ],可选每页显示的数据数目
            sortName:排序字段，
            sortOrder：排序方式：asc|desc
            checkOnSelect : false,
            selectOnCheck : false,
            nowrap : true,  把数据显示在一行里
            striped : true, 就把行条纹化。（即奇偶行使用不同背景色）
            rownumbers : true,显示行号的列。
            singleSelect : true,只允许选中一行。
            frozenColumns : [ [和列的特性一样，但是这些列将被冻结在左边。null
            {
                field : '字段名',
                title : '**',
                width : ,
                sortable:true,
                formatter : function(value, row, index){
                    return $.formatString('<a onclick="方法名(\'{0}\');"href="javascript:void(0);" target="_blank" rel="external nofollow" >{1}</a>',value,value);
                }           
            } ] ],
            columns : [ [  {  datagrid 的 column 的配置对象
                field : 'action',
                title : '操作',
                width : ,
                formatter : function(value, row, index) {
                    var str;
                    if(条件){ 
                        str+= '&nbsp;';
                        str += $.formatString('<img onclick="alterFun(\'{0}\');" src="{1}" title="修改"/>', row.Id, '图片路径');
                    }
                    if (条件) { 
                        str += '&nbsp;';
                        str += $.formatString('<img onclick="方法名(\'{0}\');" src="{1}" title="**"/>', row.Id, '图片路径');
                    }
                    return str;
                }
            }
            ] ],
            toolbar : '#toolbar',
            //请求成功
            onLoadSuccess : function(data) {//onLoadSuccess当数据加载成功时触发
                $('#searchForm table').show();
                parent.$.messager.progress('close');
            },
            onClickRow: function (rowIndex被双击行的索引，从0开始, rowData被双击行对应的记录) {
                $(this).datagrid('unselectRow'取消选中一行, rowIndex);
            },
            onRowContextMenu : function(e, rowIndex, rowData) {//当右键点击行时触发
                e.preventDefault();
                $(this).datagrid('unselectAll');
                $(this).datagrid('selectRow', rowIndex);
                $('#menu').menu('show', {
                    left : e.pageX,
                    top : e.pageY
                });
            }
        });
    });

//查询
    function searchFun() {
        dataGrid.datagrid('load', $.serializeObject($('#searchForm')));
    }

    //清空所有查询条件
    function cleanFun() {
        $('#searchForm input').val('');
    }
//弹出--修改页面
    function alterFun(Id){
        parent.$.modalDialog({
            title : '****',
            width : ,
            height : ,
            href : '${pageContext.request.contextPath}/Controller/要弹出的子页面?Id=' + Id,
            buttons : [ {
                text : '修改',
                handler : function() {
                    parent.$.modalDialog.openner_dataGrid = dataGrid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
                    var f = parent.$.modalDialog.handler.find('#form');
                    f.submit();
                }
            } ]
        });
    }
//点击申请 跳转到申请子页面
function popupWindow(){
        parent.$.modalDialog({
            title : '左上方标题名',
            width : ,子页面的宽、高
            height : ,
            href : '${pageContext.request.contextPath}/Controller/Controller对应view',
            【@RequestMapping("/Controller对应view")
                public String Controller对应view(HttpServletRequest request){
                return 子页面;
                }】
            buttons : [ {
                text : '右下角按钮的文本',
                handler : function() {
                    parent.$.modalDialog.openner_dataGrid = dataGrid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
                    var f = parent.$.modalDialog.handler.find('#form');
                    f.submit();
                }
            } ]
        });
    }
</script>

<body>
    <div class="easyui-layout" data-options="fit : true,border : false">
        <div data-options="region:'north',title:'查询条件',border:false" style="height: 120px; overflow: hidden;">
            <form id="searchForm">
                <input name="queryFlag" type="hidden" id="queryFlag" />
                <table class="table table-hover table-condensed" style="display: none;">
            <tr>
            <th>**</th>
                <td ><input placeholder="" name="" data-options=""  class="span2" /></td>
            </tr>
            <tr>
                <th>申请日期</th>
                <td colspan="3">
                <input class="span2" value="${applyDt_begin}" name="applyDt_begin" id="applyDt_begin" placeholder="点击选择日期" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'applyDt_end\')}',readOnly:true,dateFmt:'yyyy-MM-dd'})"/>
                &nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;
                <input class="span2" value="${applyDt_end}" name="applyDt_end" id="applyDt_end" placeholder="点击选择日期" 	onclick="WdatePicker({minDate:'#F{$dp.$D(\'applyDt_begin\')}',readOnly:true,dateFmt:'yyyy-MM-dd'})" />
                </td>
                <th>状态</th>
                <td>
                <select name="" class="easyui-combobox" data-options=
                "width:140,height:29,editable:true,panelHeight:'auto'">
                    <option value="">请选择</option>
                    <c:forEach items="${btOrderStMap}" var="each">
                        <option value="${each.dataKey}">${each.dataValue}</option>
                    </c:forEach>
                </select>
                </td>
            </tr>

                </table>
            </form>
        </div>
        <div data-options="region:'center',border:false">
            <table id="dataGrid"></table>
        </div>
    </div>
    <div id="toolbar" style="display: none;">
        <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'brick_add',plain:true" onclick="searchFun();">查询</a>
        <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'brick_delete',plain:true" onclick="cleanFun();">清空条件</a>
        <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'brick_add',plain:true" onclick="popupWindow();">申请</a>
    </div>
</body>
           

<script type="text/javascript">
$(function() {
    parent.$.messager.progress('close');
    $('#form').form({
        url : '${pageContext.request.contextPath}【路径】/Controller/对应方法',
        onSubmit : function() {
            parent.$.messager.progress({
                title : '提示',
                text : '数据处理中，请稍后....'
            });
            【正则表达式相关的校验
            var isValid = $(this).form('validate');
            if (!isValid) {
                parent.$.messager.progress('close');
            }
            return isValid;】
        },
        success : function(result) {
            parent.$.messager.progress('close');
            result = $.parseJSON(result);
            if (result.success) {
                parent.$.modalDialog.openner_dataGrid.datagrid('reload');
                parent.$.modalDialog.handler.dialog('close');
            } else {
                parent.$.messager.alert('错误', result.msg, 'error');
            } 
        }
    });
});
//校验数字
function validate(value) {
    var reg = new RegExp("^[0-9]*$");
    if (!reg.test(value)) {
        return false;
    }
    if (!/^[0-9]+$/.test(value)) {
        return false;
    }
    return true;
}

function cancle() {
    //关闭本窗口
    parent.$.modalDialog.handler.dialog('close');
}

//正则表达式 
$.extend($.fn.validatebox.defaults.rules, {
    inputNum : {
        validator : function(value) { 
            return /^\+?[1-9]\d*$/i.test(value); 
        }, 
        message : '格式不正确!' 
    }
});
</script>
           

<tr>
    <td align="center" style="background-color: #E7F3FB; vertical-align: middle;" width="20%" >
    <font size=?>***</font>
    </td>
    <td align="left" style="vertical-align: middle;">
    <input type="text" name="" id=""  value="" class="easyui-validatebox "  data-options="validType:'inputNum ',required:true"/>
    </td>
</tr>
           

easyUI 中文API

jQuery EasyUI API