Jquery 插件开发

第一步:闭包写法

<script type="text/javascript">
//插件闭包
; (function ($) {
      //默认传入参数
    var default_settings = {
        title: "", //弹出窗标题,选择'{title}'
        datagridUrl: "", //弹出窗数据表格的URL
        treeUrl: "", //弹出窗树的url
        Edg_id: "", //可编辑网格的id,可选
        txtName: "", //一般的文本框被赋值的字段
        txtnumber: "", //一般的文本框被赋值的字段
        outputType: 1, //输出的情况,1表示简单的文本框输出,2表示可编辑网格输出
        outputs: new Array(), //当输出参数为多个时,被赋值的字段
        //当指定outputs不为[]空数组的时候,这个是必填项
        inputs: new Array(), //表示弹出窗数据网格中的字段,与outputs的一一对应
        addRow: new Function(),
        afterSetValues:new Function(),//参数是一个对象,{outputArray:outputArray,inputArray:inputArray}
        ifType: "", //大类,这个功能待添加
        currenttype: "", //功能待添加
        columns: [[]], //弹出窗数据表格的列定义
        rows_winData_in: [], //输入行数据
        rows_winData_out: [] //输出行数据

    };
    //传入参数
    var settings = new Object();
    //这个函数的作用是,为了避免对象之间的按引用传递,为了清空数据,强制进行按值传递
    var value_assignment = function (input) {
        var output;
        if (input.constructor === Array) {
            output = new Array();
        } else if (input.constructor === Object) {
            output = new Object();
        }
        $.each(input, function (name, value) {//清空上次的数据
            if (value.constructor === String || value.constructor === Function || value.constructor === Number || value.constructor === Boolean) {//应该加上...
                output[name] = value;
            } else if (value.constructor === Array || value.constructor === Object) {
                output[name] = value_assignment(value);
            }
        });
        return output;
    };
    //构造函数,初始化全局变量shareWindow.settings
    var shareWindow = function () {//构造函数
        settings = new Object();
        settings = value_assignment(default_settings);
        this.prototype.settings = settings;
        if (arguments.length === 1) {
            if (arguments[0].constructor === String) {
                return this.prototype.settings[arguments[0]]; //获取参数的值
            } else if (arguments[0].constructor === Object) {//设置参数的值
                var settings1 = this.prototype.settings;
                $.each(arguments[0], function (name, value) {
                    $.each(settings1, function (name2, value2) {
                        if (name2 === name) {
                            settings1[name] = value;
                        }
                    });
                });
                this.prototype.settings = settings1;

            }
        } 
    };
    //测试参数传入
    var ceshi = function (){
     console.log(222);
     console.log(settings);
    }
    //将所有要放到全局变量中的变量和函数都挂到shareWindow.prototype上
    shareWindow.prototype = {
        settings: settings, //传入参数
        default_settings: default_settings, //默认的传入参数
        //以下都是函数,有一些没有必要挂上去作为全局变量的函数,到时候要去掉
        value_assignment: value_assignment, //这个函数的作用是,为了避免对象之间的按引用传递,为了清空数据,强制进行按值传递
        windowOpen: ceshi, //打开窗口的函数
  
    };
    $.shareWindow = shareWindow; //将 shareWindow挂到jQuery上
    })(jQuery); //一个闭包
</script> 
View Code

第二步:调用闭包方法

<script type="text/javascript">
//调用插件
$.shareWindow({
            title: "往来单位",
            datagridUrl: "../../Public/public_select_window.ashx?type=bandGuestGridView",
            treeUrl: "../../Public/public_select_window.ashx?type=bandGuestTree",
            outputType: "1",
            inputs: ["Gue_code", "Gue_name"],
            outputs: ["txtGuestNum1", "txtGuestName1"],
            columns: [[
                   
                    { field: 'Gue_name', title: '名称', width: 100, align: 'center', sortable: true },
                    { field: 'Gue_code', title: '编码', width: 80, align: 'center', sortable: true },
                    { field: 'Ying', title: '往来余款', width: 60, align: 'center', sortable: true },
                    { field: 'Yu', title: '预存款', width: 60, align: 'center', sortable: true },
                    { field: 'Qi', title: '其他款', width: 60, align: 'center', sortable: true }
                ]]
        }); //将coulum传进去
        $.shareWindow.prototype.windowOpen();//代码执行入口
</script>
View Code

 

posted on 2017-02-08 13:08  邹敏向日葵  阅读(86)  评论(0编辑  收藏  举报

导航