扩展Jquery方法创建LigerUI Grid
///**
//*封装jquery get请求ajax
//*author:叶明龙
//*time:2012-12-10
//*/
function getAjax(url, para, fn) {
if (typeof fn == "function") {
if (para == undefined) {
para = {};
}
$.get(url, para, function (data) {
var obj = eval("(" + data + ")");
fn.call(this, obj);
})
}
} /**
*扩展Jquery方法创建LigerUI Grid
*============================================
*author:叶明龙
*time:2014/06/21
*
*
*============================================
*/
; (function ($) {
$.fn.extend({
createLigerGrid: function (opt) {
var _t = $(this);
var options = $.extend(true, {
header: [],
title: "",
param: {},
ajaxURL: "",
ajaxMethod: "get",
pageSize: 20,
keyID: "",//主键
editor: {
url: "",
para: [],
width: 600,
height: 600
},
success: function () { }
}, opt);
options.header.unshift({
name: 'id', display: '操作', width: 100, isAllowHide: false,
render: function (record, rowindex, value, column) {
//this 这里指向grid
//record 行数据
//rowindex 行索引
//value 当前的值,对应record[column.name]
//column 列信息record[options.editor.para[0]]
var _deleConfirm = "$.ligerDialog.confirm('确定删除?', function (yes) {";
_deleConfirm += " if (yes) {";
_deleConfirm += " getAjax('" + options.ajaxURL + "?type=delete&" + "id=" + record[options.editor.para[0]] + "',";
_deleConfirm += "{";
var _f = false;
for (var pn in options.param) {
if (_f)
_deleConfirm += ",";
_deleConfirm += "'" + pn + "':'" + options.param[pn] + "'";
_f = true;
}
_deleConfirm += "}";
_deleConfirm += ",function(data){";
_deleConfirm += "if(data.success)$.ligerDialog.success('删除成功');else $.ligerDialog.error('删除失败');";
_deleConfirm += "})";
_deleConfirm += " }";
_deleConfirm += " });";
//onclick='eval(" + _deleConfirm + ");'
return "<a href='javascript:;' onclick=\"" + _deleConfirm + "\">删除</a> <a href='javascript:;' onclick='$.ligerDialog.open({ title:\"修 改 " + record[options.editor.para[0]] + "\",width: " + options.editor.width + ", height: " + options.editor.height + ",url: \"" + options.editor.url + "?type=add\" });'>修改</a>";
}
});
if (options.ajaxURL == "") {
$.ligerDialog.warn("未填写请求ajaxURL,无法响应服务器请求数据响应");
return false;
} var Grid = $(_t).ligerGrid({
title: options.title,
columns: options.header,
pageSize: options.pageSize,
method: options.ajaxMethod,
url: options.ajaxURL,
checkbox: true,
toolbarShowInLeft: true,
toolbar: {
items: [{
text: '添 加', click: function () {
$.ligerDialog.open({ width: options.editor.width, height: options.editor.height, title: "添 加", url: options.editor.url + "?type=add" });
}, icon: 'add'
},
{
text: '删 除', click: function () {
$.ligerDialog.confirm('确定删除?', function (yes) {
if (yes) {
var _Rows = Grid.getSelectedRows(), _keys = []
for (var i = 0; i < _Rows.length; i++) {
_keys.push(_Rows[i][options.editor.para[0]]);
}
getAjax(options.ajaxURL + "?type=delete&id=" + _keys.join(','), options.param, function (data) {
if (data.success)
$.ligerDialog.success('删除成功');
else
$.ligerDialog.error('删除失败');
});
}
});
}, icon: 'delete'
}
]
},
root: "data",
record: "total",
width: '100%',
height: '100%',
heightDiff: -10,
usePager: true,
enabledSort: false,
parms: options.param,
pageSizeOptions: [5, 10, 15, 20],
onCheckRow: function (checked, data, rowid, rowdata) { },
onLoaded: function (grid) {
grid.toggleLoading(false);
if (options.success)
options.success($(_t).data("request_data"), grid);
},
onSuccess: function (data, grid) {
$(_t).data("request_data", data);
},
onError: function (XMLHttpRequest, textStatus, errorThrown) {
$.ligerDialog.warn("数据加载错误");
}
});
return Grid;
}
});
})(jQuery);
页面调用示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="Stylesheet" type="text/css" href="/Content/css/Custom.css" />
<link rel="stylesheet" type="text/css" href="/Content/js/LigerUI/skins/Aqua/css/ligerui-all.css" />
<link rel="stylesheet" type="text/css" href="Content/js/LigerUI/skins/Gray/css/all.css" />
<link rel="stylesheet" type="text/css" href="Content/js/LigerUI/skins/ligerui-icons.css" />
<link href="/Content/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Content/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/Content/js/LigerUI/ligerui.all.js"></script>
<script type="text/javascript" src="/Content/js/js2014.js"></script>
<script src="/Content/js/jquery.cookie.js" type="text/javascript"></script>
<script src="Content/js/JSON2.JS"></script>
<script type="text/javascript" src="/Content/js/PUBLIC.JS"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Grid").createLigerGrid({
header: [{ display: '农作物名称', name: 'Goods_Name',isAllowHide:true },
{ display: '种植面积(亩)', name: 'Areas' }],
param: {'flag':1},
editor: {
url: "",
para: ["Goods_Name"]
},
ajaxURL: "/Pages/Hander/Highcharts.ashx"
});
});
</script>
</head>
<body>
<div id="Grid"></div>
</body>
</html>
$(document).ready(function () {
$("#Grid").createLigerGrid({
header: [{ display: '农作物名称', name: 'Goods_Name',isAllowHide:true },
{ display: '种植面积(亩)', name: 'Areas' }],
param: {},
editor: {
url: "",
para: ["Goods_Name"]
},
ajaxURL: "/Pages/Hander/Highcharts.ashx"
});
});
扩展Jquery方法创建LigerUI Grid的更多相关文章
- jquery 扩展插件方法
分析插件jquery.countdown.js (function($) { $.fn.countdown = function(options) { // default options var d ...
- 扩展JQuery和JS的方法
//JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展 var aClass = function(){} //1 定义这个类的静态方法 aC ...
- 封装jQuery Validate扩展验证方法
一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...
- JQuery方法扩展
第一种 extend <!-- extend 扩展jQuery,其实就是增加一个静态方法 --> 定义: $.extend({ sayHello:function(name) { aler ...
- jquery validate扩展验证方法
/***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...
- [ligerUI] grid封装调用方法
/** * 获取页面参数 */ function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && wind ...
- jQuery Validate扩展验证方法 (zhangxiaobin)
/***************************************************************** jQuery Validate扩展验证方法 (zhangxiaob ...
- 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip
原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip infragistics是全球领先的UI工具和用户体验的专家,Infragistics开发了一系列的 ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
随机推荐
- 洛谷P1730最小密度路径
题目传送门; 首先理解题目,究其本质就是一个最短路问题,而且数据范围贼水,用floyd完全没问题,但是题目有变化,要求出路径边权值与边数之比,这里就可以考虑在把floyd中的二维数组变为三维,f[ i ...
- 循序渐进PYTHON3(十三) --6-- COOKIE和SESSION
1. 由于HTTP协议是无状态的协议(发送一次请求即断开),所以服务端需要记录用户的状态时,就需要用某种机制来识具体的用户,这个机制就是Session. 典型的场景比如购物车,当 ...
- 洛谷——P2908 [USACO08OPEN]文字的力量Word Power
P2908 [USACO08OPEN]文字的力量Word Power 题目描述 Farmer John wants to evaluate the quality of the names of hi ...
- webpack 打包过程及常用插件
前言 要理解webpack 首先明白三个概念:module,chunk,bundles,即输入,中间态,输出. chunk: This webpack-specific term is uesd in ...
- nyoj(表达式求值)
描述 ACM队的mdd想做一个计算器,但是,他要做的不仅仅是一计算一个A+B的计算器,他想实现随便输入一个表达式都能求出它的值的计算器,现在请你帮助他来实现这个计算器吧. 比如输入:"1+2 ...
- ES5 Object.create 方法
Object.create(proto[, propertiesObject])The Object.create() method creates a new object with the spe ...
- 【HDU 5283】Senior's Fish
http://acm.hdu.edu.cn/showproblem.php?pid=5283 今天的互测题,又爆零了qwq 考虑每个点对答案的贡献. 对每个点能产生贡献的时间线上的左右端点整体二分. ...
- BZOJ 2152 聪聪可可(点分治)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2152 [题目大意] 给出一棵树,问任取两点之间距离为3的倍数的概率是多少 [题解] 树 ...
- [CODECHEF]LUCASTH
题意:设$f(n,k)=\sum\limits_{\substack{S\subseteq\{1,\cdots,n\}\\|S|=k}}\prod\limits_{x\in S}x$,问$f(n,0\ ...
- 【推导】【模拟】AtCoder Regular Contest 082 F - Sandglass
题意:有个沙漏,一开始bulb A在上,bulb B在下,A内有a数量的沙子,每一秒会向下掉落1.然后在K个时间点ri,会将沙漏倒置.然后又有m个询问,每次给a一个赋值ai,然后询问你在ti时刻,bu ...