Easyui 让DataGrid适应浏览器宽度

简介:

DataGrid有100%宽度的设置,但是有时不是很让人满意,比如你你放大或者拉放你的浏览器,那么DataGrid只维持第一次加载的宽高,非常难看

复制代码
 $('#List').datagrid({
            url: '/SysSample/GetList',
            width: $(window).width() - 10,
            methord: 'post',
            height: $(window).height() - 35,
            fitColumns: true,
.................................
复制代码

你看到$(window).width() - 10和$(window).height() - 35

这是我设置的页面第一次载入,去后去窗体的宽度和高度进行计算,那么在第一次载入显示是正常的,但是放大或者拉伸浏览器,datagrid将不做改变了,我们这是要用到一个jquery的方法,叫resize()

 

参数

 

fnFunctionV1.0

在每一个匹配元素的resize事件中绑定的处理函数。

[data],fnString,FunctionV1.4.3

data:resize([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的resize事件中绑定的处理函数。

看到浏览器变化时候激发的事件,所以我们要加入:

复制代码
!--自动DataGrid 从第一次加载与重置窗体大小时候发生的事件:分部视图-->
<script type="text/javascript">
    $(function () {
        $(window).resize(function () {
            $('#List').datagrid('resize', {
                width: $(window).width() - 10,
                height: $(window).height() - 35
            }).datagrid('resize', {
                width: $(window).width() - 10,
                height: $(window).height() - 35
            });
        });
        
    });
</script>
复制代码

好了,我们来做一个对比(第一载入的时候)

缩小浏览器的时候

完美显示

 本文转自ymnets博客园博客,原文链接:http://www.cnblogs.com/ymnets/p/3439312.html,如需转载请自行联系原作者

相关文章
|
5月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
38 2
|
5月前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
64 0
|
5月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
5月前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
147 0
|
5月前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
|
5天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
11 0
|
1月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
16天前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
|
2月前
|
机器学习/深度学习 人工智能 前端开发
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
使用TensorFlow.js在浏览器中进行情感分析是一个非常实用的应用场景。TensorFlow.js 是一个用于在JavaScript环境中训练和部署机器学习模型的库,使得开发者能够在客户端直接运行复杂的机器学习任务。对于情感分析,我们可以使用预先训练好的模型来识别文本中的积极、消极或中性情感。
83 4
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
|
2月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
42 1