扩展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>&nbsp;&nbsp;<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"
            });
        });