第一篇学的是做一个管理的外框,接着就是数据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){}

//value 这个field绑定的值   rowData 这行数据内容  rowIndex 选择行的行号

columns: [[
    { field: 'Id', title: '编号', width: 100, sortable: true },
    { field: 'ClassName', title: '类型名称', width: 150, sortable: true },
    { field: 'ClassDescribe', title: '描述', width: 150, sortable: true },
    { field: 'Id', title: '操作', width: 150, sortable: true, formatter: formatOper 
 
function formatOper(index) {
     return "<a href=\"javascript:void(0)\"  onclick=\"UsDelete(" + index + ")\">删除</a>"; 
}

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: 数据
onDblClickRow: function (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 取消选中一行
刷新datagird的两种方法:
1.grid.datagrid('reload');
2.grid.datagrid({ url:'/Admin/SeachProductTypeInfo?Id='+ 6});//带参数查询(刷新datagrid数据)
 
代码如下:
<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: '用户名:&nbsp;<input type="text" id="username" style="height:18px; width: 100px;line-height: 18px; "/>'
}, '-', {
text: '邮件:&nbsp;<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的使用的更多相关文章

  1. Jquery Easy UI初步学习(一)

    Easy UI 1.3.2 以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧 先从后台管理的主页面开始,如要要做主页需要了 ...

  2. Jquery Easy UI初步学习(三)数据增删改

    第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo ...

  3. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  4. Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  6. JQuery Easy Ui (Tree树)详解(转)

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  7. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

  8. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

随机推荐

  1. Flask从入门到精通之在视图函数中处理表单

    在新版hello.py 中,视图函数index() 不仅要渲染表单,还要接收表单中的数据.更新后的index() 视图函数如下: @app.route('/') def index(): name = ...

  2. 如何实现keep-alive

    路径: 由上图可知,keep-alive.js导出的对象(如下),作为一个属性将会注入到Vue.options.components中. const patternTypes = [String, R ...

  3. [Swift实际操作]七、常见概念-(10)使用UserDefaults和归档方式存取用户数据实际操作

    在项目开发之中,你会经常需要将一些数据存储在本地,以便记录用户生产的数据或操作习惯.在项目文件夹上带点击鼠标右键.弹出右键菜单.本文将为你演示,存储用户数据的两种常用方式. 选择菜单中的创建新文件选项 ...

  4. PHP之旅6 php的类与面向对象

    对于类与面向对象的问题其实刚开始不用非要弄懂原因,直接先这样用,用多了你就发现你会了.所以 学习面向对象就先去做.用的多了你就发现这个就是这样的. 对于类的理解,我自己的理解就是:有一个叫做类的东西里 ...

  5. 一对一关联查询注解@OneToOne的实例详解

    表的关联查询比较复杂,应用的场景很多,本文根据自己的经验解释@OneToOne注解中的属性在项目中的应用.本打算一篇博客把增删改查写在一起,但是在改的时候遇到了一些问题,感觉挺有意思,所以写下第二篇专 ...

  6. 【OpenCV3】threshold()函数详解

    threshold()函数源码 double cv::threshold( InputArray _src, OutputArray _dst, double thresh, double maxva ...

  7. 使用sqlyog连接到服务器数据库,实现可视化数据操作。(完美解决版。)《亲测!!!!》

      服务器中的表 select Host ,User ,Select_priv ,Insert_priv ,Update_priv ,Delete_priv ,Create_priv ,Drop_pr ...

  8. POJ 2389

    #include <iostream> #include <algorithm> #include <string> #define MAXN 300 using ...

  9. 剑指offer四十七之求1+2+3+...+n

    一.题目 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 二.思路 1.需利用逻辑与的短路特性实现递归终 ...

  10. Postman—测试脚本

    前言 对于Postman中的每个请求,我们都可以使用JavaScript语言来开发测试脚本.这也就好比单元测试.我们先看看Postman的相关界面: 编写测试脚本 Postman测试脚本本质上是在发送 ...