EasyUI篇のDataGrid

HTML:

<table id="dg"></table> 或者 <div id="dg"></div>

JS:

$(‘#dg‘).datagrid({
        url: ‘/AdminNewList/GetList‘,
        method: ‘post‘,
        rownumbers: true,
        columns: [[
            { field: ‘ck‘, checkbox: true },
            { field: ‘title‘, title: ‘标题‘, width: 200, align: ‘center‘ },
            { field: ‘author‘, title: ‘作者‘, width: 100, align: ‘center‘ },
            { field: ‘subDateTime‘, title: ‘时间‘, width: 150, align: ‘center‘ },
            { field: ‘msg‘, title: ‘详细‘, width: 400, align: ‘center‘ },
            { field: ‘delete‘, title: ‘删除‘, width: 100, align: ‘center‘ },
            { field: ‘editor‘, title: ‘修改‘, width: 100, align: ‘center‘ }
        ]]
    });

注:后台GetList方法,返回的是json字符串

时间: 2024-08-14 20:08:40

EasyUI篇のDataGrid的相关文章

easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题

做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用字段名拼出来的,如果含有特殊字符可能违反了css的命名规则(权威的css命名规则暂时没有找到,这篇文章稍有提到). 我找了个有特殊字符的列的数据,发现果然歪了.验证了想法. 由于项目的特殊性,数据库的表是动态创建的,也就是部分列名是由用户输入的,比较随意(当然,列头是另外是有显示名称的). 所以这个

Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的datagrid的使用方法 在这里,datagrid的使用我不做过多讲解,俺毕竟是初学者,不敢班门弄斧.所以就简单带一下. ①.在easyui的layout中的center中定义一个table,id为"datagridTable". <div region="center"

实例:SSh结合Easyui实现Datagrid的分页显示(JAVA版)

近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. 首先看一下要实现的效果:当每页显示5行数据: 当每页显示10行数据,效果如下: 具体步骤: 1.下载Easyui,并搭建环境.可参照博客 http://blog.csdn.net/lhq13400526230/article/details/9148299 2.搭建SSH工程,整个工程的目录结构如

为easyUI的dataGrid添加自己的查询框

dataGrid作为easyUI的一个核心组件,其功能上是很强大的. 但是外观上似乎就有点差强人意了,首先说一下我对dataGrid外观的2点感受 1.图标不好看,且尺寸很小(16x16)-- 关于这个,可以点这里看另一篇blog解决 2.高度问题,如果分页只有8-10条的话,且toolbar只放16x16的图标,那么整个高度只有差不多300px最多 这次的改写主要也就是解决这么两个问题 下面主要是为dataGrid添加一个多条件的查询框,先看一下最终的效果: 图1 图2 做点简单的介绍: 这里

IE浏览器下easyui的datagrid无法显示和列显示不齐解决方案

如遇到IE无法显示easyui的datagrid表格其他浏览器显示正常,可以先检查一下js代码是否有多出的逗号,因为IE是非常的严格的,一个逗号都可能导致程序无法运行. 在IE执行AJAX增加修改方法时,弹出下载框,可在Controller中规定一下格式 @RequestMapping(value="/addxxx",produces = {"text/html;charset=UTF-8"}),问题得到解决 还有IE浏览表格错位,这个问题让我非常的头疼,找了很多的

WPF自定义样式篇-DataGrid

WPF自定义样式篇-DataGrid 先上效果图: 样式: <!--DataGrid样式-->    <Style TargetType="DataGrid">        <Setter Property="RowHeaderWidth" Value="0"></Setter>        <Setter Property="AutoGenerateColumns"

[Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列

为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid.treegrid增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中 */ var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* grid本身 */ var

easyui的datagrid获取选中行

注意设置idfield="id",这里的id要和下面field的id保持一致,而且要保证唯一性. easyui的datagrid获取选中行,布布扣,bubuko.com

SpringMVC+easyUI中datagrid分页实现_2014.5.1

一.概述 SpringMVC: 1.是面对方法级变量的,在操作起来会比struts方便一些(structs是类级变量),具体体现在了srpingMVC的注解上面, 如@RequstMapping("/login"),而且对于返回值ModelAndView这也是一大亮点,既可以返回一个页面(View),再加上@ResponseBody注解以后就可以返回一个      模型对象(也就是一种数据结构). 2.对于方法级传入的参数操作起来也相当方便,比如本例中,在加载DataGrid时,会像后