呵呵,请教下jquery easyui 中怎么刷新现在的tab页啊

发布网友 发布时间：2022-04-20 18:32

我来回答

共3个回答

懂视网 时间：2022-04-20 22:53

　　最近在使用MVC4与EasUI过程中遇到些容易导致界面变形的问题，纠结了很久，但其实当发现问题在哪里时，倒觉得最终还是自己对MVC4的概念没把握好，OK,show time. 本示例Contact 页面的部分标签loadAbout页面。

　　1. 首先复原一下问题，相信应该会有后来的朋友也遇见。加载JS 与CSS 。

　　　　App_Start文件下的BundleConfig.cs

1 bundles.Add(new ScriptBundle("~/bundles/jquery-easyui").Include(2    "~/Content/jquery-easyui-1.3.4/jquery-easyui-min.js"));3 4 bundles.Add(new StyleBundle("~/Content/jquery-easyui-1.3.4/themes/default/css").Include("~/Content/jquery-easyui-1.3.4/themes/default/easyui.css"));

　　以上内容在配置时需要注意:默认download下来的jquery.easyui.min.js 名称要改为jquery-easyui-min.js,否则加载不成功；其次尤其要注意stylebundle的virtualpath问题，必须是XXX/Default/XXX 才可以，要到达CSS的目录，但名称可以自定义；如果为XXX/Default的话，不好意思，认不到相应的CSS。

　　2. 在_Layout.cshtml 页加载相应的引用；　　

1 @Scripts.Render("~/bundles/jquery-easyui")
2　 @Styles.Render("~/Content/css")

　　使用link标签将样式表放在文档head中，且在script标签前。

　　原因是:另外样式放在底部的加载情况是：当页面逐步加载时，文字首先显示，接着是图片。最后，当样式表正确下载了之后，已经呈现的文字　　和图片就要用新的样式重绘。就好像格子铺里，东西都按顺序摆好了，但是老板说，这个东西得这样、那样摆，又得挨个重新摆了。

　　将script脚本放在底部

　　原因是:脚本放在页面顶部同样会引起页面阻塞，阻止页面逐渐呈现。

　　http协议1.1规范，建议浏览器从每个主机并行下载两个组件，并行下载的数量的优劣取决于带宽和CPU，过多的并行下载也会降低性能。并行　　下载的优点很明显，组件可以并行下载，但是下载脚本时并行下载是禁用的，是为了保证脚本能够按照正确的顺序执行。因为脚本不能并行下　　载，为避免组件的下载延迟，最好将脚本放在页面底部。

　 3. Controller代码调用页面，使用PartialView，如此框架便会自动过滤掉母版页的样式与脚本，成为一个干净的partial.

1 public PartialViewResult About()2  {3  ViewBag.Message = "Your app description page.";5  return PartialView();6  }

　　4. Contact页面

 1 
 2 
日历 - Calendar
 3  4   5  单击选择日期 6  7 
 8 9 

　　5. About页面

1 2 @* @Scripts.Render("~/bundles/jquery")*@ //此处是主要问题点,一不小心，就会让人很捉鸡。3 @Scripts.Render("~/bundles/jquery-easyui")

如果不增加标红的jquery引用，则一切正常；

如果加上后，某处似乎会出现重复的问题，如下:

此问题，原因其实很简单，easyui 的控件是需要动态画上去的，而之前母版页加载的easyui.js 在Load()方法调用后，是不会再执行了，因为那货已经在母版页加载过一次了，此次本来就是使用了Ajax的部分页面重画，当然不能再麻烦人家了。有时心不平气不和就会费神费力浪费青春，回过头来，原来解决问题的方案早都在哪里等Cao了。

热心网友 时间：2022-04-20 20:01

把每个tab页分别用不同的页面来建立
然後用 #parse 这个来连接不用的页面
<div id="tabs" class="easyui-tabs" style="height:450px;">
<div id="headerInfo" title="基本资料" style="padding:5px;height:400px;"> <!-- 物料成品基本信息 -->
#parse("/WEB-INF/depotVm/basic.vm") <!--分支来的页面地址-->
</div>
<div title="详细资料" style="overflow:auto;padding:5px;"> <!-- 物料成品详细信息 -->
#parse("/WEB-INF/depotVm/minuteness.vm")<!--分支来的页面地址-->
</div>
<div title="修改记录" style="overflow:auto;padding:5px;"> <!-- 物料成品的操作记录信息 -->
#parse("/WEB-INF/depotVm/modification.vm")<!--分支来的页面地址-->
</div>
</div>
<script type="text/javascript">

//TABS 选项
$('#tabs').tabs({
border:false});
</script>

要刷新那个页面就直接重新加载那个页面的表单 jQuery('#headerInfo').html(data); headerInfo是from表单的id
也可以这样
<a href="javascript:loadModel({page:basePath + 'depot.html', title:'基本信息'});" name="conservation" id="cancelUserBtns">取消</a> 直接返回 这个action中转得页面 basePath 是项目的路径 加上 这个 action的name属性值depot

热心网友 时间：2022-04-20 21:19

// 获取选择的面板
var tab = $('#tt').tabs('getSelected');

tab.panel('open').panel('refresh','new_content.php');