MVC+Jquery開發B/S系統 （一） 列表綁定（三）

除了綁定Table外，還有其他的迴圈列表需要綁定。

其實都一樣，都是把模版化成資料。模板的存法用注釋的方式只是一種方法。更好的方法自由發揮 。目前就是為了取得模板。

比如 用一個Json來存放需要的Template，然後專門放在一個templates.js裡或由xml配置的模板然 後產生json資料， 需要用的時候直接 templates.tempName 就可以了。

寫博文太累了。特別是自己的思想給別人分享時更累。我這裡也不贅述了。貼下代碼吧

代碼

; (function($) {
    var templateList = []; //存放一般的模板列表

    $.fn.bindList = function(args, template, options, async) {
        var me = this;

        var url, async, template, dataSource;

        url = me.attr("datasource");
        async = me.attr("async") == "0";
        if (arguments.length > 0) {
            switch (typeof (args)) {
                case "string":
                    url = args;
                    break;
                case "object":
                    dataSource = args;
                    break;
            }
        }
        //args是json
        switch (arguments.length) {
            case 1:
                if (args == null)
                    return me;
                if (typeof (args) == "string") {
                    url = args;
                }
                else if (typeof (args) == "object") {
                    url = args.url;
                    async = args.async || async;
                    template = args.template || template;
                    options = args.options || options;
                    dataSource = args.data;
                }
                break;
            case 2: // url,async || url,tempalte || data,template
                if (typeof (arguments[0]) == "string")
                    url = arguments[0];
                else
                    dataSource = arguments[0];

                if (typeof (arguments[1]) == "bool") {
                    async = arguments[1];
                    template = me.getTemplate();
                }
                break;
            case 3: //url,template,async || url,template,options || data,template,options
                template = template;
                options = options;
                if (typeof (options) == "bool") {
                    async = options;
                    options = undefined;
                } break;
            case 4:
                template = template;
                options = options;
                async = async;
                break;
        }


        if ((url == undefined || url == "") && dataSource == undefined) {
            return me;
        }

        if (dataSource == undefined) {
            $.ajax({
                type:"POST",
                async: async,
                url: url,
                success: function(data) {

                    if (data == "" || data == null)
                        return;
                    data = eval("(" + data + ")");

                    me.bindListData(data.list || data, template, options);
                }
            });
        }
        else {
            me.bindListData(dataSource, template, options);
        }
        return me;
    };
    $.fn.bindListData = function(data, template, options) {

        var me = this;
        template = template || me.getTemplate();
        this.empty();
        var resultTemplate = replaceTemplate(template, data);


        var prepend, append, dvalue;
        if (options != undefined) {
            prepend = options.prepend;
            append = options.append;
            dvalue = options.dvalue;
        }

        if (prepend != undefined) {
            resultTemplate = prepend + resultTemplate;
        }



        if (append != undefined) {
            resultTemplate += append;
        }

        this.html(resultTemplate);

        //繫結控制項的預設值
        if (this.attr("type") == "select-one") {
            if (dvalue != undefined)
                this.bindControl(dvalue);
            else
                this[0].selectedIndex = 0;
        }

        me.setLink();

    };


})(jQuery);