Jquery Easy UI--datagrid的使用(转)

时间:2022-03-25 14:44:33

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性、方法。

打开easyui的demo 就可以看到如下一段代码:

Jquery Easy UI--datagrid的使用(转)

和上篇一样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数据)
 
Jquery Easy UI--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: ,
height: ,
columns: [[
{ field: "LoginEmail", title: "登陆邮箱", sortable: true, width: },
{ field: "PassWord", title: "密码", sortable: true, width: },
{ field: "TrueName", title: "真实姓名", sortable: true, width: },
{ field: "Phone", title: "手机号码", sortable: true, width: },
{ field: "UserCard", title: "身份证", sortable: true, width: },
{ field: "NickName", title: "昵称", sortable: true, width: },
{ field: "QQ", title: "QQ号码", sortable: true, width: },
{ field: "LastLoginTime", title: "最后登陆时间", sortable: true, width: , formatter: formatDatebox },
{ field: "CreateOn", title: "创建时间", sortable: true, width: , formatter: formatDatebox },
{ field: "UpdateBy", title: "修改人", sortable: true, width: },
{ field: "UpdateOn", title: "修改时间", sortable: true, width: , formatter: formatDatebox },
{ field: 'Id', title: '操作', width: , 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() + , //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + ) / ), //quarter
"S": this.getMilliseconds() //millisecond
};
if (/(y+)/.test(format))
format = format.replace(RegExp.$,
(this.getFullYear() + "").substr( - RegExp.$.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$,
RegExp.$.length == ? o[k] :
("" + o[k]).substr(("" + o[k]).length));
return format;
}; function d_close() {
$('#EditDig').dialog('close');
};
</script>

Jquery Easy UI--datagrid的使用(转)的更多相关文章

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

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

  2. Jquery Easy UI Datagrid 上下移动批量保存数据

    DataGrid with 上下移动批量保存数据 通过前端变量保存修改数据集合,一次性提交后台执行 本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...

  3. jquery Easy UI Datagrid&lpar;数据网格&rpar;学习心德,附API

    第一步,引入主要的css样式和js文件 <meta http-equiv="Content-Type" content="text/html; charset=ut ...

  4. JQuery Easy Ui DataGrid

    Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults. The datagrid display ...

  5. JQuery Easy Ui dataGrid 数据表格

    数据表格 - DataGrid 英文文档:http://www.jeasyui.com/documentation/index.php# 继承$.fn.panel.defaults,使用$.fn.da ...

  6. JQuery Easy Ui dataGrid 数据表格 --&gt&semi;转

    转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容 概况 使用方法 ...

  7. Jquery easy ui datagrid動態加載列問題

    1.如下图效果是当选择不同的日期范围时datagrid则会加载出对应的列数

  8. jquery easy ui datagrid中遇到的坑爹的問題。。。

    ; //修改 function Update() { //獲取選中行 var selected = $("#dg1").datagrid('getSelected'); //判斷是 ...

  9. Jquery easy UI 上中下三栏布局 分类: ASP&period;NET 2015-02-06 09&colon;19 368人阅读 评论&lpar;0&rpar; 收藏

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

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

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

随机推荐

  1. windows系统c盘占满&sol;linux系统磁盘block、inode占满处理

    windows系统 下载c盘清理.bat到服务器,双击bat文件将自动清理 linux系统 先远程ssh登录上服务器,登录教程:http://www.west263.com/faq/list.asp? ...

  2. Markdown:认识&amp&semi;入门

    来源:http://sspai.com/25137 一.认识 Markdown 在刚才的导语里提到,Markdown 是一种用来写作的轻量级「标记语言」,它用简洁的语法代替排版,而不像一般我们用的字处 ...

  3. 1行代码为每个Controller自定义&OpenCurlyDoubleQuote;TabBar”-b

    这篇文章大致会带你实现以下的功能,废话少说,先看东西: JPNavigationController.gif Q&A:Demo里都有那些东西? 01.关于自定义导航栏 01.第一个控制器的导航 ...

  4. djano-cms学习笔计(一)

    开放源码的内容管理系统,基于Web框架Django的. 优势如下 高度可扩展的插件系统,可让您*地构建各种内容的网站. 前端编辑直接更改您的网站上的内容.工程的所有插件. 感谢可读的网址的页面结构是 ...

  5. jQuery插件---轻量级的弹出窗口wBox

    Box Demo wBox——轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层, ...

  6. java多线程系列&lpar;三&rpar;---等待通知机制

    等待通知机制 前言:本系列将从零开始讲解java多线程相关的技术,内容参考于<java多线程核心技术>与<java并发编程实战>等相关资料,希望站在巨人的肩膀上,再通过我的理解 ...

  7. UmengShareDemo【友盟分享SDK集成,基于V6&period;9&period;3版本】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这里简单记录下友盟分享SDK集成的步骤. 如果想要使用自定义分享对话框实现,请参考<ShareDialogDemo[分享对话框 ...

  8. 带拦截器配置的 struts&period;xml文件

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...

  9. HTML5标签选择,图文混排使用dl dt dd

    图文混排,可以使用 dl dt dd(dd 和 dt 是同级,不可以嵌套,没有先后顺序) 1,上面红色部分是标题,可以使用h1里面包含一个span标签,样式一样,所以两个可以一起写. 2,上面黑色部分 ...

  10. Spring Cloud&lpar;Dalston&period;SR5&rpar;--Zuul 网关-过滤器

    Spring Cloud 为 HTTP 请求的各个阶段提供了多个过滤器,这些过滤器的执行顺序由各自提供的一个 int 值决定,提供的值越小则优先级越高,默认的过滤器及优先级如下: 自定义过滤器 在默认 ...