zoukankan      html  css  js  c++  java
  • 扩展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: [],
                         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>&nbsp;&nbsp;<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"
                });
            });

     

  • 相关阅读:
    .net调用存储过程详解
    SQL SERVER 与ACCESS、EXCEL的数据转换
    dedecms 织梦 获取文章链接地址
    用SQL语句添加删除修改字段、一些表与字段的基本操作、数据库备份等
    SQL Server触发器创建、删除、修改、查看示例步骤
    (后缀数组模板)BZOJ1031[JSOI2007]字符加密Cipher
    LOJ2055「TJOI / HEOI2016」排序
    BZOJ1096[ZJOI2007]仓库建设
    POI2011Meteors
    数位dp(1)
  • 原文地址:https://www.cnblogs.com/yeminglong/p/3802390.html
Copyright © 2011-2022 走看看