easyui datagrid 学习 (一)

注意:当使用谷歌浏览器时!需要 设置style="overflow:hidden",这样则可以去掉滚动条!(该样式添加到layout上!)

fit:属性

自动填父容器,

border:属性

默认为true,设置为false时!去掉边框!

<body>
    <table id="dg"></table>
    <script type="text/javascript">
        $(function() {
            $(‘#dg‘).datagrid({
                url : ‘datagrid_data.json‘,
                title : ‘my数据表格‘, //标题
                iconCls : ‘‘, //图表
                pagination : true, //设置为true 在底部创建分页工具条
                pageSize : 10, //初始化每页行数
                pageList : [ 10, 20, 30, 40, 50 ],//设置可变每页行数
                fit : true,
                fitColumns : true, //自动设置列宽,设置该属性不会出现横向滚动条
                nowrap : false, //如果单元格中的数据过大,则是否自己折行,默认是true不折行!
                idField : ‘code‘, //设置标识字段,如果设置该属性,在datagrid中选中的数据行,在进行翻页之后还是选中状态!
                sortName:‘name‘,  //设置默认排序
                sortOrder:‘desc‘, //设置默认降序方式排序         注意: 排序设置现在只是前端完成配置,后台还需要根据返回的参数进行后续处理
                columns : [ [ {
                    field : ‘code‘,
                    title : ‘Code‘,
                    width : 100,
                    sortable:true
                }, {
                    field : ‘name‘,
                    title : ‘Name‘,
                    width : 100,
                    sortable:true
                }, {
                    field : ‘price‘,
                    title : ‘Price‘,
                    width : 100,
                    align : ‘right‘
                } ] ]
            });
        });
    </script>

</body>

时间: 2024-12-25 18:10:34

easyui datagrid 学习 (一)的相关文章

easyui datagrid学习笔记

datagrid行可编辑(部分行,部分列可编辑). 1.下拉框选择身份证,在后面的证件号文本输入框需要验证证件号:否则不需要验证 //身份证类型改变,改变身份证号的 验证 $('#cardType_search_addDialog').combobox({ onChange:function(){ var idtype=$("#cardType_search_addDialog ").combobox('getValue'); if(idtype=='身份证'){ $('#idCode

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据.此处,我们使用Struts2框架整合DataGrid,实现数据的显示. 一.页面内容 为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF

DataTables VS EasyUI DataGrid 基础应用 转

DataTables中文网推出了 第一篇 关于DataTables和其他表格插件比较后,为了把让这个比较更有意义,更能帮助到大家,DataTables中文网 做了问卷调查,根据小伙伴们的填写我归纳了一下,一个表格插件关注点在以下三个部分基础.高级的和进阶: 基础 排序 分页 搜索 美观 合理的配置 高级 单击和双击行事 选择高亮显示 增删改查 列宽拖动 数据导出 添加序号 进阶 支持的数据类型 行内编辑 合并单元格 自定义表头 高扩展性 易用的API 模块化 所以根据以上列出的这些功能点,Dat

EasyUI DataGrid及Pagination

接上一篇EasyUI项目驱动学习 DataGrid数据表格及Pagination分页一起介绍 一.通过<table>标记创建DataGrid,嵌套<th>标签定义列表 <table id="dg" class="easyui-datagrid"> <thead> <tr> <th data-options="field:'ck',checkbox:true"></th&

CRM管理系统(二)上----easyui+Datagrid

今天终于把数据字典模块做出来了,前前后后大概做了两天时间,修改和整理又用了两天时间,在这个模块中主要用的是easyui的DataGrid插件,同时通过自己在网上看文档,查问题,整理了一下DataGrid的运用,自己编码的过程中反复斟酌,一共修改了两次,三套不同的版本,今天全部给贴出来 大体的界面如下: 这里先附上easyui DataGrid插件的官方文档地址: http://www.jeasyui.net/plugins/183.html 建议如果学习的话,还是先看下官方文档,博主自己也在官方

初识 easyui datagrid

首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jquery.min.js"></script><script src="js/jquery.easyui.min.js"></script><link rel="stylesheet" type="text

easyui datagrid 批量编辑和提交

前台主要代码: <script type="text/javascript"> $(function() { var $dg = $("#dg"); $dg.datagrid({ url : "servlet/list", width : 700, height : 250, columns : [ [ { field : 'code', title : 'Code', width : 100, editor : "vali

jquery easyui datagrid 排序列

点击排序列,将获取参数有:page=1&rows=10&sort=UserName&order=desc c#后台获取sort跟order参数 string sortColumn = Request.Params["sort"].ToString(); string order = Request.Params["order"].ToString(); jquery easyui datagrid 排序列,布布扣,bubuko.com

easyui datagrid行合并

easyui datagrid行合并 合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office"); */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); var tTable =