`

datagrid --1

 
阅读更多



 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>1.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!-- easyui的样式 -->
    <link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/default/easyui.css">
    <!-- 小图标的样式 -->
    <link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/icon.css">
   
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../jslib/syUtil.js"></script>
 
 <script type="text/javascript">
  $(function(){
   
  });
  
  
 </script>
 
  </head>
 
  <body id="blayout" class="easyui-layout"> 
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> 
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> 
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <!-- href只加载center.html里面的body部分代码,其余的都不管 -->
    <div data-options="region:'center',title:'center title',href:'center.html',overflow:'hidden'"></div> 
  </body> 

</html>

center.html的内容如下:

 

<script type="text/javascript">
 var datagrid;
 
 $(function(){
  datagrid = $("#datagrid").datagrid({
   url : 'http://127.0.0.1:8001/sypro/userController/datagrid.action',
   title : "datagrid",
   iconCls : "icon-save",
   pagination : true,
   pageSize : 10,
   pageList : [10,20,30],
   //fit属性让这个表格填充到父级容器中
   fit : true,
   //fitColumns让表格自动调整列的宽度,而不出现横向的滚动条
   fitColumns : true,
   //如果一个列的值太长,需要折行显示,就需要设置nowrap : false
   nowrap : false,
   border : false,
   idField : "id",
   sortName : "name",
   sortOrder : "desc",
   columns : [[
    {title:"编号", field:"id", width:100},
    {title:"姓名", field:"name", width:100, sortable:true},
    {title:"密码", field:"password", width:200}
   ]]
  });  
 });
 
</script>

<div class="easyui-tabs" fit="true" border="false">
 <div title="用户管理系统">
  <table id="datagrid"></table>
 </div>
</div>

  • 大小: 17.5 KB
分享到:
评论

相关推荐

    Datagrid-filter插件

    1. 集成:将`datagrid-filter.js`引入项目,并根据`datagrid-filter.html`中的示例代码配置和初始化插件。 2. 自定义过滤器:插件可能支持多种类型的过滤器,如文本、数字、日期等,开发人员可以根据需要定制过滤...

    datagrid-dnd(可以拖放的datagrid)

    在本例中,我们关注的是一个名为"datagrid-dnd"的特性,这是一项允许用户通过拖放操作来重新排列数据网格行的功能。这个特性增强了用户交互性和数据管理的便利性,尤其适用于那些需要频繁调整数据顺序的场景。 首先...

    datagrid-groupview.js

    在给定的标题"datagrid-groupview.js"中,我们可以看出这是一个针对jQuery EasyUI Datagrid组件的扩展,用于实现表格数据的分组显示功能。现在,我们将深入探讨这个知识点。 首先,jQuery EasyUI的Datagrid组件是一...

    datagrid-cellediting.js

    datagrid-cellediting.js

    datagrid-filter

    datagrid-filter 是一个与数据展示相关的前端组件,常用于表格数据的筛选和过滤。在这个特定的场景中,用户遇到了一个问题:当尝试向datagrid-filter插入数据时,组件会错误地显示两个相同的条目。这个问题可能是...

    datagrid-export.zip

    这个“datagrid-export.zip”文件提供了一种解决方案,使得开发者能够将EasyUI-datagrid中的数据按照其在界面上的样式,包括合并的单元格、复杂的表头、背景色和文字颜色等,方便地导出到Excel中,实现“所见即所得...

    datagrid-export.js

    该文件是用来将easyui-datagrid按照格式导出到excel中,可以将合并的单元格,复杂的表头,背景色及字色等按照显示的样式导出到excel,即所见即所得

    datagrid-detailview.js

    《datagrid-detailview.js:基于jQuery的高性能JS模板引擎在数据网格中的应用》 在Web开发领域,高效的数据展示是至关重要的,特别是在处理大量数据时。`datagrid-detailview.js`就是一个针对这种需求设计的jQuery...

    easyui datagrid插件 datagrid-detailview.js

    支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js

    datagrid-detailview.js datagrid-bufferview.js datagrid-groupview.js

    `datagrid-detailview.js`文件包含了实现这一功能的代码。使用DetailView,可以提高用户体验,让用户无需离开当前页面就能查看和操作详细信息。 2. **BufferView**: BufferView是一种优化大量数据加载的技术。在...

    Easyui扩展datagrid-dnd.js,实现拖动grd的必要文件

    Easyui的扩展datagrid-dnd.js,实现拖动datagrid行到其他数据表格的必要文件

    datagrid-scrollview-demo

    【标题】"datagrid-scrollview-demo" 是一个基于DataGrid组件的滚动视图示例项目,主要展示了如何在网页中实现数据表格的高效滚动浏览功能。DataGrid是前端开发中常用的一种展示大量数据的控件,它能够以表格的形式...

    datagrid-export文件及pdf和Excel表格使用demo.rar

    datagrid-export 是一个用于数据网格导出的工具,它支持将数据导出为PDF和Excel格式。这个工具在处理大量数据展示和数据交换时非常有用,特别是在Web应用中,用户可能需要将屏幕上的表格数据保存为便于查看和编辑的...

    jquery-easyui-datagridview datagrid-detailview.js升级自定义展开按钮功能

    jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...

    datagrid-detailview.js下载

    easyui的datagridview拓展,使用方法看我的博文,网址:https://blog.csdn.net/qq_30907845/article/details/108963344

    datagrid-export-filter.zip

    datagrid-export-filter.zip是一个压缩包,其中包含了用于EasyUI Datagrid的导出和过滤功能的JavaScript文件。EasyUI是一个基于jQuery的UI库,它为开发者提供了丰富的组件,包括表格(datagrid)、对话框、菜单等,...

    datagrid datagrid-scrollview 列宽不够时,无法翻页问题

    近期在用datagrid-scrollview时,发现如果列数较少,不产生横向滚动条时,则不会触发虚拟滚动翻页的动作,只能查出第一批次的数据信息,经过大量的时间测试改善,发现需要改变源码中的判断条件。仅供参考

Global site tag (gtag.js) - Google Analytics