Jquery Easy UI初步学习(二)datagrid的使用
第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性、方法。
打开easyui的demo 就可以看到如下一段代码:
和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理
DataGrid 属性
参数名 | 类型 | 描述 | 默认值 |
title | string | Datagrid面板的标题 | null |
iconCls | string | 在面板上通过一个CSS类显示16x16图标。 | null |
border | boolean | 设置面板是否具有边框 | TRUE |
width | number | datagrid面板的宽度 | auto |
height | number | datagrid面板的高度 | auto |
columns | array | DataGrid列配置对象 | null |
frozenColumns | array | 冻结的列,被现实在左边 | null |
striped | boolean | 设置是否让单元格显示条纹。默认false。 | FALSE |
method | string | 通过该方法类型请求远程数据。默认post。 | post |
nowrap | boolean | 是否包裹数据,默认为包裹数据显示在一行 | TRUE |
idField | string | 标识字段,或者说主键字段 | null |
url | string | 请求数据的URL.(josn格式) | null |
loadMsg | string | 加载数据时显示的信息 | Processing, please wait … |
pagination | boolean | 是否显示分页工具栏 | FALSE |
rownumbers | boolean | 是否显示行号 | FALSE |
singleSelect | boolean | 是否单行选定 | FALSE |
fit | boolean | 是否自动适应父容器 | FALSE |
pageNumber | number | 分页初始化行号 | 1 |
pageSize | number | 初始化分页大小 | 10 |
pageList | array | 分页大小选择列 | [10,20,30,40,50] |
queryParams | object | 请求数据时额外发送的参数 | {} |
sortName | string | 排序列 | null |
sortOrder | string | 升序还是降序 'asc' 或者 'desc'. | asc |
toolbar | string | 工具栏(绑定新增,查询按钮...) | null |
Column 属性
名称 | 类型 | 描述 | 默认值 |
title | string | 列字段要现实的名称 | undefined |
field | string | 列字段 | undefined |
width | number | 宽度 | undefined |
rowspan | number | 单元格行数 | undefined |
colspan | number | 单元格列数 | undefined |
align | string | 文本对齐方式,同align属性. | undefined |
sortable | boolean | 是否可以被排序. | undefined |
checkbox | boolean | 是否具有多选框 | undefined |
formatter | class | 方法 |
注:formatter:function (value, rowData, rowIndex){}
Events(事件)
Name | Parameters | Description |
onLoadSuccess | none | 调用远程数据成功是激活 |
onLoadError | none | 装载错误时激活 |
onClickRow | rowIndex , rowData | 点击一行时激活,参数包括: |
rowIndex:点击的行数,从0开始 | ||
rowData: 当前行的数据 | ||
onDblClickRow | rowIndex ,rowData | 双击一行是触发,参数包括: |
rowIndex:点击的行数,从0开始 | ||
rowData: 当前行的数据 | ||
onSortColumn | sort,order | 对一列进行排序时激活,参数包括: |
sort:排序字段名称 | ||
order: 排序规则,升序,降序 | ||
onSelect | rowIndex,rowData | 选中一行时激活,参数有: |
rowIndex:选中的行数 | ||
rowData: 数据 | ||
onUnselect | rowIndex,rowData | 取消选中时激活,参数: |
rowIndex:选中的行数 | ||
rowData: 数据 |
Methods(方法)
Name | Parameter | Description |
---|---|---|
options | none | 返回所有属性 |
resize | none | 重置大小布局 |
reload | none | 重新加载数据 |
fixColumnSize | none | 调整列的大小 |
loadData | param | 装载数据,以前的数据会被移除 |
getSelected | none | 返回选中的行,没有则返回空 |
getSelections | none | 返回所有的行,空则返回空数组 |
clearSelections | none | 取消所有选中 |
selectRow | index | 选中一行,参数为行号 |
selectRecord | idValue | 根据主键查询出一条记录 |
unselectRow | index | 取消选中一行 |

<div id="grid" class="easyui-grid" ></div>
<div id="EditDig" class="easyui-dialog" title="用户修改" style="width:400px;height:350px;" closed="true" id="EditForm">
<div id="info" closed="true" class="easyui-window"></div> </div>
<script type="text/javascript">
$(function () {
$("#grid").datagrid({
title: "用户列表",
iconCls: 'icon-save',
methord: 'get',
url: "/CrmUser/GetUserList/",
sortName: 'Id',
sortOrder: 'desc',
idField: 'Id',
border: true,
width: 1000,
height: 300,
columns: [[
{ field: "LoginEmail", title: "登陆邮箱", sortable: true, width: 100 },
{ field: "PassWord", title: "密码", sortable: true, width: 100 },
{ field: "TrueName", title: "真实姓名", sortable: true, width: 100 },
{ field: "Phone", title: "手机号码", sortable: true, width: 100 },
{ field: "UserCard", title: "身份证", sortable: true, width: 100 },
{ field: "NickName", title: "昵称", sortable: true, width: 100 },
{ field: "QQ", title: "QQ号码", sortable: true, width: 100},
{ field: "LastLoginTime", title: "最后登陆时间", sortable: true, width: 100, formatter: formatDatebox },
{ field: "CreateOn", title: "创建时间", sortable: true, width: 100, formatter: formatDatebox },
{ field: "UpdateBy", title: "修改人", sortable: true, width: 100 },
{ field: "UpdateOn", title: "修改时间", sortable: true, width: 100, formatter: formatDatebox },
{ field: 'Id', title: '操作', width: 100, align: 'center', formatter: function (value,rowIndex) {
var s = '<a href="#" onclick="view(\'' + value + '\')">查看</a> ';
var e = '<a href="#" onclick="edit(\'' + value + '\')">编辑</a> ';
var d = '<a href="#" onclick="del(\'' + value + '\')">删除</a> ';
return s + e + d;
}
}
]],
// frozenColumns: [[
// { field: "CreatorId",title:"创建人ID",sortable:true,width:100 }
// ]],
toolbar: [{
text: '新增',
iconCls: 'icon-add',
handler: edit
}, '-', {
text: '用户名: <input type="text" id="username" style="height:18px; width: 100px;line-height: 18px; "/>'
}, '-', {
text: '邮件: <input type="text" id="email" style="height:18px; width: 100px;line-height: 18px; "/>'
}, '-', {
text: '查找',
iconCls: 'icon-search',
handler: search
}],
pagination: true,
fit: true,
fitColumns: true,
singleSelect: true });
}); //查询
function search() {
$("#grid").datagrid({
url: "/CrmUser/GetUserList/?userName="+$("#username").val()+"&email="+$("#email").val(),
});
}
//查看
function view(pId) {
} //修改
function edit(pId) {
} //删除
function del(pId) {
} //做时间转换
function formatDatebox(value) {
if (value == null || value == '') {
return '';
}
var dt;
if (value instanceof Date) {
dt = value;
}
else {
dt = new Date(value);
if (isNaN(dt)) {
value = value.replace(/\/Date\((-?\d+)\)\//, '$1'); //标红的这段是关键代码,将那个长字符串的日期值转换成正常的JS日期格式
dt = new Date();
dt.setTime(value);
}
}
return dt.format("yyyy-MM-dd"); //这里用到一个javascript的Date类型的拓展方法,这个是自己添加的拓展方法,在后面的步骤3定义
} Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
};
if (/(y+)/.test(format))
format = format.replace(RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
}; function d_close() {
$('#EditDig').dialog('close');
};
</script>
附件列表
Jquery Easy UI初步学习(二)datagrid的使用的更多相关文章
- Jquery Easy UI初步学习(一)
Easy UI 1.3.2 以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧 先从后台管理的主页面开始,如要要做主页需要了 ...
- Jquery Easy UI初步学习(三)数据增删改
第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- JQuery Easy Ui (Tree树)详解(转)
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
- jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
随机推荐
- Flask从入门到精通之在视图函数中处理表单
在新版hello.py 中,视图函数index() 不仅要渲染表单,还要接收表单中的数据.更新后的index() 视图函数如下: @app.route('/') def index(): name = ...
- 如何实现keep-alive
路径: 由上图可知,keep-alive.js导出的对象(如下),作为一个属性将会注入到Vue.options.components中. const patternTypes = [String, R ...
- [Swift实际操作]七、常见概念-(10)使用UserDefaults和归档方式存取用户数据实际操作
在项目开发之中,你会经常需要将一些数据存储在本地,以便记录用户生产的数据或操作习惯.在项目文件夹上带点击鼠标右键.弹出右键菜单.本文将为你演示,存储用户数据的两种常用方式. 选择菜单中的创建新文件选项 ...
- PHP之旅6 php的类与面向对象
对于类与面向对象的问题其实刚开始不用非要弄懂原因,直接先这样用,用多了你就发现你会了.所以 学习面向对象就先去做.用的多了你就发现这个就是这样的. 对于类的理解,我自己的理解就是:有一个叫做类的东西里 ...
- 一对一关联查询注解@OneToOne的实例详解
表的关联查询比较复杂,应用的场景很多,本文根据自己的经验解释@OneToOne注解中的属性在项目中的应用.本打算一篇博客把增删改查写在一起,但是在改的时候遇到了一些问题,感觉挺有意思,所以写下第二篇专 ...
- 【OpenCV3】threshold()函数详解
threshold()函数源码 double cv::threshold( InputArray _src, OutputArray _dst, double thresh, double maxva ...
- 使用sqlyog连接到服务器数据库,实现可视化数据操作。(完美解决版。)《亲测!!!!》
服务器中的表 select Host ,User ,Select_priv ,Insert_priv ,Update_priv ,Delete_priv ,Create_priv ,Drop_pr ...
- POJ 2389
#include <iostream> #include <algorithm> #include <string> #define MAXN 300 using ...
- 剑指offer四十七之求1+2+3+...+n
一.题目 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 二.思路 1.需利用逻辑与的短路特性实现递归终 ...
- Postman—测试脚本
前言 对于Postman中的每个请求,我们都可以使用JavaScript语言来开发测试脚本.这也就好比单元测试.我们先看看Postman的相关界面: 编写测试脚本 Postman测试脚本本质上是在发送 ...