///** //*封装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: [], 600, height: 600 }, success: function () { } }, opt); options.header.unshift({ name: 'id', display: '操作', 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]] + "", " + 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({ 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", '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" }); });