1. 程式人生 > >基於jquery的方法封裝案例

基於jquery的方法封裝案例


var Common = (function () {
    var Common = {
        BindTable: function (table, url, uniqueid, queryid, columns) {
            $(table).bootstrapTable({
                // data: bt_data,
                url: url,
                dataType: "json",
                //search: 'true',
                method: 'get',                     //請求方式(*)
                //  contentType: "application/x-www-form-urlencoded", //post請求需要加的欄位
                //toolbar: '#toorbar',                //工具按鈕用哪個容器
                striped: true,                      //是否顯示行間隔色
                cache: false,                       //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
                pagination: true,                   //是否顯示分頁(*)
                sortable: true,                    //是否啟用排序
                sortOrder: "asc",                  //排序方式
                queryParams: queryParams,           //傳遞引數(*)
                sidePagination: "server",           //分頁方式:client客戶端分頁,server服務端分頁(*)
                pageNumber: 1,                      //初始化載入第一頁,預設第一頁
                pageSize: 10,                       //每頁的記錄行數(*)
                pageList: [10, 20, 50, 100],        //可供選擇的每頁的行數(*),
                smartDisplay: false,
                //strictSearch: true,
                //showColumns: true,                  //是否顯示所有的列
                //showRefresh: true,                  //是否顯示重新整理按鈕
                minimumCountColumns: 2,             //最少允許的列數
                //clickToSelect: true,                //是否啟用點選選中行
                //height: 500,                        //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度
                uniqueId: uniqueid,                  //每一行的唯一標識,一般為主鍵列
                showToggle: false,                  //是否顯示詳細檢視和列表檢視的切換按鈕
                cardView: false,                    //是否顯示詳細檢視
                columns: columns
                //onLoadSuccess: function (data) {
                //    var result = data["rows"];
                //    $.each(result, function (index, content) {
                //        //loadfunc;
                //    }),
                //    $(table).bootstrapTable("load", data);
                //},
            });
            function queryParams(params) {
                var temp = {   //這裡的鍵的名字和控制器的變數名必須一直,這邊改動,控制器也需要改成一樣的
                    sort: params.sort,
                    order: params.order,
                    limit: params.limit,   //頁面大小
                    offset: params.offset,   //頁碼
                    queryid: queryid,
                };
                return temp;
            }
        },
        InputCheck: function (objval, type) {
            var reg = new RegExp();
            var erro = "";
            switch (type) {
                case "domain": reg = new RegExp("^[0-9A-Za-z](\.){4,15}$"); erro = "4~15位字母、數字組成!"; break;
                case "email": reg = new RegExp("^[a-zA-Z0-9_.-]
[email protected]
[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$"); erro = "請輸入正確的郵箱!"; break; case "account": reg = new RegExp("^[a-zA-Z0-9_-]{4,16}$"); erro = "4到16位(字母,數字,下劃線,減號)"; break; case "pwd": reg = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$"); erro = "密碼長度在6~18之間,必須同時包含字母和數字!"; break case "qq": reg = new RegExp("^[1-9][0-9]{4,10}$"); erro = "請輸入5~11位QQ號碼"; break; // case "phone": reg = new RegExp("^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$"); erro = "請輸入正確的手機號碼"; break; case "wechat": reg = new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$"); erro = "6至20位,以字母開頭,字母,數字,減號,下劃線"; break; } if (objval === "") { //輸入不能為空 layer.msg("輸入不能為空!"); return false; } else if (!reg.test(objval)) { //正則驗證不通過,格式不對 layer.msg(erro); return false; } else return true; }, SetSimple: function (value, table, identify) { var lst = []; if (value == null || value == undefined || value == "")//多刪 { var a = $(table).bootstrapTable('getSelections'); $.each(a, function () { lst.push("'" + this[identify] + "'") }); if (lst == "") { layer.msg("請選擇要操作的資料!"); return; } } else { lst.push("'" + value + "'"); }//單刪 return lst; }, SerializeObject: function (obj) { var data = {}; var t = $(obj).serializeArray(); $.each(t, function () { data[this.name] = this.value; }); return data; }, //onkeydown事件禁用文字框粘帖 fncKeyStop: function (evt) { if (!window.event) { var keycode = evt.keyCode; var key = String.fromCharCode(keycode).toLowerCase(); if (evt.ctrlKey && key == "v") { evt.preventDefault(); evt.stopPropagation(); } } }, HTMLEncode: function (html) { var temp = document.createElement("div"); (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html); var output = temp.innerHTML; temp = null; return output; }, htmlDecode: function (text) { //1.首先動態建立一個容器標籤元素,如DIV var temp = document.createElement("div"); //2.然後將要轉換的字串設定為這個元素的innerHTML(ie,火狐,google都支援) temp.innerHTML = text; //3.最後返回這個元素的innerText(ie支援)或者textContent(火狐,google支援),即得到經過HTML解碼的字串了。 var output = temp.innerText || temp.textContent; temp = null; return output; }, // 全選 多選 selectMore:function(elTotal,elMany){ var checkboxs =elMany; var mainbox =elTotal; // console.log(checkboxs.length) ; //console.log(mainbox.length) mainbox.on("ifChecked ifUnchecked",function(event){ if(event.type == 'ifChecked'){ checkboxs.iCheck('check'); }else{ checkboxs.iCheck('uncheck'); } }); checkboxs.on('ifChanged',function(event){ //下面的是用子選項控制mainbox的業務邏輯 if(checkboxs.filter(':checked').length == checkboxs.length) { mainbox.prop('checked',true); } else { mainbox.prop('checked',false); } mainbox.iCheck('update') }); }, // 表格分頁 tabledata:function(el){ el.dataTable({ // lengthMenu: [ 10, 20, 30],//這裡也可以設定分頁,但是不能設定具體內容,只能是一維或二維陣列的方式,所以推薦下面language裡面的寫法。 paging: true,//分頁 ordering: false,//是否啟用排序 searching: false,//搜尋 bLengthChange: false, //去掉每頁顯示多少條資料方法 language: { paginate: {//分頁的樣式內容。 previous: "<", next: ">", first: "", last: "" }, zeroRecords: "沒有內容",//table tbody內容為空時,tbody的內容。 //下面三者構成了總體的左下角的內容。 info: "共_PAGES_ 頁,顯示第_START_ 到第 _END_個",//左下角的資訊顯示,大寫的詞為關鍵字。 infoEmpty: "0條記錄",//篩選為空時左下角的顯示。 infoFiltered: ""//篩選之後的左下角篩選提示, }, pagingType: "full_numbers",//分頁樣式的型別 }); }, // 匹配顏色高亮 keywordscolorful:function(str, key){ var reg = new RegExp("(" + key + ")", "g"); var newstr = str.replace(reg, "<font style='background:#ff0;'>$1</font>"); return newstr; }, } return Common; })(); Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, //month "d+": this.getDate(), //day "h+": this.getHours(), //hour "m+": this.getMinutes(), //minute "s+": this.getSeconds(), //second "q+": Math.floor((this.getMonth() + 3) / 3), //quarter "S": this.getMilliseconds() //millisecond } if (/(y+)/.test(format)) { format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(format)) { format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); } } return format; }