easyui-layout与easyui-datagrid完整页面代码

<script type="text/javascript"src="${pageContext.request.contextPath }/static/js/jquery-1.8.3.js"></script><!-- 导入easyui类库 --><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath }/static/js/easyui/themes/icon.css"><link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath }/static/js/easyui/ext/portal.css"><link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath }/static/css/default.css"><script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui/ext/jquery.portal.js"></script><script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui/ext/jquery.cookie.js"></script><script src="${pageContext.request.contextPath }/static/js/easyui/locale/easyui-lang-zh_CN.js"type="text/javascript"></script><script type="text/javascript" src="${pageContext.request.contextPath}/static/js/datajs/WdatePicker.js"></script><script type="text/javascript">var columns = [ [{field : 'operation',title : 'operation',width : 68,align : 'center',formatter : function(data, row, index) {var opHtml = "<a href=\"javascript:void(0);\" onclick=\"edit('"+ row.id+ "',"+ index+ ")\" class=\"easyui-linkbutton\"  plain=\"true\" style=\"text-decoration:none;font-size:12px;height:100%;width:50%\"><b>U</b></a>"+ "    <a href=\"javascript:void(0);\" onclick=\"deleteIndexFrequency('"+ row.id+ "',"+ index+ ")\" class=\"easyui-linkbutton deleteNewsNotic\" plain=\"true\"  style=\"text-decoration:none;font-size:13px;height:100%;width:50%\"><b>D</b></a>";return opHtml;}}, {field : 'id',title : 'ID',width : 250,align : 'left',},{field : 'plan_is_prepared',title : '计划是否已准备',width : 99,align : 'center',formatter : function(data, row, index) {if (data == '1') {return "已准备";} else {return "未准备";}}} ] ];$(function() {// 先将body隐藏，再显示，不会出现页面刷新效果$("body").css({visibility:"visible"});$('#grid').datagrid({fit : true,border : false,rownumbers : true,//显示行号animate : true, //动画效果singleSelect : true,//只能单选striped : true,pageList : [ 10, 20, 50 ],//每页大小pagination : true, //启用分页url : "${pageContext.request.contextPath}...", //请求地址columns : columns,loadMsg : '数据加载中...',frozenColumns : [ [ {  //冻结列field : 'id',title : 'ID',width : 250,align : 'left',} ] ],onDblClickRow : doDblClickRow, //双击列 onLoadSuccess: function (data) { //数据加载成功后执行            if (data.total == 0) { //没有查到数据时显示的样式            $("#centerShow").css("display","none");            $("#showInfo").css("display","block")            }            else { //查到数据后显示的样式            $("#showInfo").css("display","none")            $("#centerShow").css("display","block");            }        },});$("#updateWindow").window({ //初始化更新窗口大小width : 700,height : 500,modal : true});$("#addWindow").window({ //初始化添加窗口大小width : 700,height : 500,modal : true});//   点击保存 提交表单!$("#save").click(function() {  //更新数据点击保存后事件if ($("#updatePlanForm").form("validate")) {/*  $("#updatePlanForm").submit();$('#updateWindow').window("close"); */var data = $("#updatePlanForm").serialize();$.ajax({type : 'post',url : "${pageContext.request.contextPath }...",data : JSON.stringify(conveterParamsToJson(data)),dataType : 'json',contentType : "application/json; charset=utf-8",success : function(data) {if (data.result) {$("#grid").datagrid('reload');$.messager.alert('更新成功',data.msg,"info");} else {$.messager.alert('更新失败',data.msg,"error");}}});} else {return;}$('#updateWindow').window("close");});$("#saveVP").click(function() { //添加数据后点击提交后触发事件if ($("#addPlanForm").form("validate")) {var data = $("#addPlanForm").serialize();$.ajax({type : 'post',url : "${pageContext.request.contextPath }...",data : JSON.stringify(conveterParamsToJson(data)),dataType : 'json',contentType : "application/json; charset=utf-8",success : function(data) {if (data.result) {$("#grid").datagrid('reload');$.messager.alert('添加成功',data.msg,"info");} else {$.messager.alert('添加失败',data.msg,"error");}}});} else {return;}$('#addWindow').window("close");});//自定义扩展方法，动态调整序号列的宽度$("#grid").datagrid({onLoadSuccess : function () {$(this).datagrid("fixRownumber");}});$('.buttonStyle').hover(function(){$(this).removeClass('buttonStyle').addClass('overButtonStyle')},function(){$(this).removeClass('overButtonStyle').addClass('buttonStyle')})})function doSearch() {var isDel = 0;if ($('#yesOrNot').combobox('getText') == '已删除') {isDel = 1;}else if ($('#yesOrNot').combobox('getText') == '未删除') {isDel = 0;}else if($('#yesOrNot').combobox('getText') == 'All'){isDel = null;}$("#grid").datagrid("load", {"startTime" : $("#startDate").val(),"endTime" : $("#endDate").val(),"id" : $("input[name='Id']").val(),"activity_type_id" : $("input[name='activeTypeId']").val(),"is_deleted" : isDel})}function addData(){$('#addWindow').window("open");$("#addPlanForm")[0].reset();}//双击修改内容function doDblClickRow(rowIndex, rowData) {$('#updateWindow').window("open");$("#updatePlanForm").form("load", rowData);}

<span style="white-space:pre"></span>//更新前向后台发送请求获取选中行的数据，添加到更新窗口中function edit(id, index) {var dataVo = {id : id};$.ajax({type : 'post',url : '${pageContext.request.contextPath}...',data : JSON.stringify(dataVo),dataType : 'json',contentType : "application/json; charset=utf-8",success : function(data) {if (data.flag) {$('#updateWindow').window("open");$("input[name='id']").val(data.result.id);$("#plan_status").numberbox('setValue', data.result.plan_status);//当核验框的class为easyui-numberbox，必需用这种方式赋值} else {$.messager.alert('提示', data.msg);}}});}

<span style="white-space:pre"></span>//删除一条记录function deleteIndexFrequency(id, index) {jQuery.messager.confirm('提示:','你确认要删除吗?',function(event) {if (event) {var dataVo = {id : id};$.ajax({type : 'post',url : '${pageContext.request.contextPath}...',data : JSON.stringify(dataVo),dataType : 'json',contentType : "application/json; charset=utf-8",success : function(data) {if (data.payload) {$("#grid").datagrid('reload');$.messager.alert('删除成功',data.msg,"info");} else {$.messager.alert('删除失败',data.msg,"error");}}});} else {return;}});}//根据选择的查询条件导出相应数据function exportData(){var isDel = 0;if ($('#yesOrNot').combobox('getText') == '已删除') {isDel = 1;}else if ($('#yesOrNot').combobox('getText') == '未删除') {isDel = 0;}else if($('#yesOrNot').combobox('getText') == 'All'){isDel = 10;}var startTime =  $("#startDate").val();var endTime = $("#endDate").val();var id = $("input[name='Id']").val();var activity_type_id = $("input[name='activeTypeId']").val();var elemIF = document.createElement("iframe");   elemIF.src = "${pageContext.request.contextPath}/visit/exportVisitPlan?is_deleted="+isDel+"&startTime="+startTime+"&endTime="+endTime+"&id="+id+"&activity_type_id="+activity_type_id;  elemIF.style.display = "none";  document.body.appendChild(elemIF)}//自定义扩展方法，动态调整序号列的宽度$.extend($.fn.datagrid.methods, {      fixRownumber : function (jq) {          return jq.each(function () {              var panel = $(this).datagrid("getPanel");              var clone = $(".datagrid-cell-rownumber", panel).last().clone();              clone.css({                  "position" : "absolute",                  left : -1000              }).appendTo("body");              var width = clone.width("auto").width();              if (width > 25) {                  //多加5个像素,保持一点边距                  $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5);                  $(this).datagrid("resize");                  //一些清理工作                  clone.remove();                  clone = null;              } else {                  //还原成默认状态                  $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).removeAttr("style");              }          });      }  }); var easyuiPanelOnMove = function(left, top) {/* 防止超出浏览器边界 */var parentObj = $(this).panel('panel').parent();if (left < 0) {    $(this).window('move', {        left : 1    });}if (top < 0) {    $(this).window('move', {        top : 1    });}var width = $(this).panel('options').width;var height = $(this).panel('options').height;var right = left + width;var buttom = top + height;var parentWidth = parentObj.width();var parentHeight = parentObj.height();if(parentObj.css("overflow")=="hidden"){if(left > parentWidth-width){$(this).window('move', {        "left":parentWidth-width    });}if(top > parentHeight-height){$(this).window('move', {        "top":parentHeight-height    });}}}$.fn.panel.defaults.onMove = easyuiPanelOnMove;$.fn.window.defaults.onMove = easyuiPanelOnMove;$.fn.dialog.defaults.onMove = easyuiPanelOnMove;</script><style type="text/css">.overButtonStyle {padding:4px 16px;margin-left:30px;border-radius:11px;font-size:13px;cursor: pointer;background-color:#D9D9D9;color:red}.buttonStyle {padding:4px 16px;margin-left:30px;background-color:#F0F0F0;border-radius:11px;font-size:13px;cursor: pointer;color:black}</style></head><body class="easyui-layout" style="visibility:hidden;"><div style="display:none;color:red;position:absolute;top:50%;left:40%;font-size:2em" id="showInfo"><b>没有查到相关数据</b></div><div data-options="region:'north'" style="padding: 6px; background: #7F99BE; border: false"><form id="tb" method="post"><b>start:</b> <input editable="false" id="startDate" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'endDate\')}',dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true})" style="width:135px!important; height: 15px" /> <pre name="code" class="html">                        <b>end:</b> <input <span style="font-family: Arial, Helvetica, sans-serif;">editable="false" id="endDate" class="Wdate" type="text"  </span><span style="font-family: Arial, Helvetica, sans-serif;">onFocus="WdatePicker({minDate:'#F{$dp.$D(\'startDate\')}',dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true})"  </span><span style="font-family: Arial, Helvetica, sans-serif;">style="width:135px!important; height: 15px" /> </span>

   <span>ID:</span><input name="Id" class="easyui-textbox" style="width: 100px">   

<span style="white-space:pre"></span><span>活动类型ID:</span><input name="activeTypeId" class="easyui-textbox" style="width: 100px">  

<span style="white-space:pre"></span><span>isDel:</span> <select id="yesOrNot" class="easyui-combobox" style="width: 80px;" data-options="editable:false"><option value="all">All</option><option value="yes">已删除</option><option value="no" selected>未删除</option></select>

<span style="white-space:pre"></span><span onclick="doSearch()" class="buttonStyle">search</span> <span onclick="exportData();" class="buttonStyle">导出</span> 

<span style="white-space:pre"></span><span onclick="addData();" style="float:right;margin-right:20px" class="buttonStyle">添加</span></form></div><div data-options="region:'center'"style="padding: 6px; background: #eee;" id="centerShow"><table id="grid"></table></div>

<div class="easyui-window" title="update window" id="updateWindow" collapsible="false" minimizable="false" maximizable="true"closed="true" style="top: 20px; left: 200px"><div region="north" style="height: 31px; overflow: hidden;"split="false" border="false"><div class="datagrid-toolbar"><a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" style="color: green; font-size: 15px"> <b>submit</b></a></div></div><div region="center" style="overflow: auto; padding: 6px;" border="false"><form id="updatePlanForm" action="#"><table class="table-edit" width="95%" align="center"><tr class="title" style="font-size: 15px"><th colspan="2" style="font-size: 18px; height: 40px; padding-left: 25px;">拜访计划信息<input type="hidden" name="id" id="Id" /></th></tr><tr><th style="height: 35px">计划活动日期</th><th style="margin-right:32px"><input name="activity_plan_date" class="Wdate" type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true})" style="height: 15px" /></th></tr><tr><th style="height: 35px">计划审核状态</th><th><input type="text" name="plan_review_status" id="plan_review_status" class="easyui-numberbox" required="true" min="0" max="1" missingMessage="必须填写0或1"/></th><th>计划活动类型ID</th><th><input type="text" name="activity_type_id" class="easyui-validatebox" data-options="required:true,validType:'multiple[\'equals[32]\',\'RegeMatch\']'"  invalidMessage="必输32个字符或存在非法字符" onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/></th></tr><tr><th>计划活动时长</th><th><input type="text" name="activity_duration" class="easyui-numberbox" required="true" min="60" max="21600" invalidMessage="时间在10秒到21600秒"/></th></tr><tr><th style="height: 35px">计划被拒绝原因</th><th><input type="text" name="refuse_reason" class="easyui-validatebox" data-options="required:true,validType:'multiple[\'length[3,100]\',\'RegeMatch\']'" invalidMessage="字符最少3个，最多100个或存在非法字符"/></th></tr></table></form></div></div><div class="easyui-window" title="add window" id="addWindow" collapsible="false" minimizable="false" maximizable="true"closed="true" style="top: 20px; left: 200px"><div region="north" style="height: 31px; overflow: hidden;" split="false" border="false"><div class="datagrid-toolbar"><a id="saveVP" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" style="color: green; font-size: 15px"> <b>submit</b></a></div></div><div region="center" style="overflow: auto; padding: 6px;" border="false"><form id="addPlanForm" action="#"><table class="table-edit" width="95%" align="center"><tr class="title" style="font-size: 15px"><th colspan="2" style="font-size: 18px; height: 40px; padding-left: 25px;">拜访计划信息<input type="hidden" name="id" id="Id" /></th></tr>......</table></form></div></div><script type="text/javascript">$.extend($.fn.validatebox.defaults.rules,{multiple: {          validator: function (value, vtypes) {              var returnFlag = true;              var opts = $.fn.validatebox.defaults;              for (var i = 0; i < vtypes.length; i++) {                  var methodinfo = /([a-zA-Z_]+)(.*)/.exec(vtypes[i]);                  var rule = opts.rules[methodinfo[1]];                  if (value && rule) {                      var parame = eval(methodinfo[2]);                      if (!rule["validator"](value, parame)) {                          returnFlag = false;                          this.message = rule.message;                          break;                      }                  }              }              return returnFlag;          }      }  ,minLength:{validator:function(value, param){return value.length >=param[0];},message:'请至少输入(2)个字符.'},equals:{validator:function(value, param){return value.length == param[0];},message:'长度必须为(2)个字符.'},RegeMatch:{validator:function(value, param){ var pattern = new RegExp("[~'!@#$%^&*()-+_=:]");    return !pattern.test(value);  },message:'非法字符.'}})</script></body></html>