page78.js

//单行表单控件
var page78 = function () {


};


//cols:mode 默认文本框 ""即label 
page78.prototype.settings = {
    url: "",//api
    pg: 'page',//页面PG
    cols: [],
    //必须{name,head,mode("<select"),v,colspan(合并单元格),tdend}
    //,def(新增默认值),h, title
    title: "",//表头
    dbcols: ["all"],//获取的列名 all全部
    bcid: 'd4856531-e9d3-20f3-4c22-fe3c65fb009c',//bcid
    mid: "",//mid    
    tb: "",//控件ID
    idmodel: "",


    colleft: 2,//左边占多少格 右边即12-左边
    btnend: '',//添加到后面的HTML代码
    getm: "getbyid",//获取api
    m: "m",
    loadrowspars: null,//载入数据方法参数array
    cansave: true,//是否显示保存按钮


    divtop:null,//上方按钮追加
    oninihtml: null,//初始化HTML后事件
    onloadbef: null,//载入数据前 有这个初始不会载入数据
    onallload: null,//载入数据之后
    onsavebef: null,//保存数据之前 返回false


    tbs: [],//文本框控件数组
    source: null,//获取的数据
    basiccols: [],//暂时不处理自定栏位 后续重构控件后再加上
    //basiccols: [{ name: "remark", head: '备注', title: "请输入备注" }
    //    , { name: "remark2", head: '自定栏位1', h: 1 }, { name: "remark3", head: '自定栏位2', h: 1 }
    //    , { name: "remark4", head: '自定栏位3', h: 1 }, { name: "remark5", head: '自定栏位4', h: 1 }
    //    , { name: "remark6", head: '自定栏位5', h: 1 }
    // , { name: "upby", head: '修改人', mode: "" }, { name: "uptime", head: '修改时间', mode: "" }


}


page78.prototype.init = function (options) {


    var that = this;
    this.settings = $.extend({}, this.settings, options);
    this.settings.cols = options.cols.concat(this.settings.basiccols);
    if (this.settings.tb == "")
        this.settings.tb = "tb_" + this.settings.pg;


    this._inithtml();


    if (that.settings.onloadbef != null)
        that.settings.onloadbef();
    else
        that.loadrows();


}


/**
 * 与基本样式或有不同
 */
page78.prototype._inithtml = function () {
    var that = this;
    var pg = that.settings.pg;
    var id = this.settings.tb;
    var content = $("#content");


    //页面头部
    //tmp = '<div class="app-content-body"> <div class="wrapper-md">'
    //    + '<div class="panel panel-default" id="' + pg + '">'
    //    //说明组件
    //    + '<div class="panel-heading" id="head' + id + '"><div class="btn-group window_top">'
    //    + '<button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">'
    //    + that.settings.title + '帮助<span class="caret"></span></button>'
    //    + '<ul class="dropdown-menu" role="menu" id="des' + id + '">'
    //    + '</ul>'
    // tmp += '<button type="button" class="btn btn-sm btn-primary pageref" >刷新</button>';
    // if (that.settings.cansave)
    //     strtmp += '<button type="button" class="btn btn-primary" id="btnSave' + id + '">保存</button>';


    // tmp += that.settings.divtop;
    //tmp += '</div></div></div></div></div>'
    //content.append(tmp);


    tmp = '<button type="button" class="btn btn-sm btn-primary pageref" >刷新</button>';
    if (that.settings.cansave)
        strtmp += '<button type="button" class="btn btn-primary" id="btnSave' + id + '">保存</button>';
    tmp += that.settings.divtop;
    var headtb_page = $("#headtb_page");
    headtb_page.children(".window_top").append(tmp)
    headtb_page.find(".pagedes").html(that.settings.title + '帮助<span class="caret"></span>');




    //说明
    var des = that.settings.des;
    var desstr = '';
    des.forEach(function (item) {
        desstr += '<li><a href="#">' + item + '</a></li>';


    });
    desstr += '<li><a href="#">.常用： 单击表头排序 回车或TAB跳到下一格 ctrl + f查找 ctrl + s保存 Esc取消 表格可直接复制粘贴到EXCEL</a> </li>'
    desstr += '<li><a href="#">.如需帮助 客服电话：0736888888或点击下方客服QQ<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=657225485&amp;site=qq&amp;menu=yes" target="_blank">                    <img title="点此联系客服" border="0" alt="点此联系客服" src="/Content/Images/pa.gif"> </a> </a> </li>';
    $("#des" + id).append(desstr);


    var pg = $("#" + this.settings.pg);
    
    pg.empty();
    pg.data('settings', this.settings);




    var cols = this.settings.cols;
    var length = cols.length;
    var mode;
    var colleft = that.settings.colleft;
    var colright = 12 - that.settings.colleft;
    //为了统一 这里以后改为封闭HTML 到时把上层DIV 定义个统一的CSS 比如formdiv 即可
    for (var i = 0; i < length; i++) {
        if (cols[i].mode == undefined)
            cols[i].mode = '<input type="text" class="form-control rounded" ';
        else if (cols[i].mode == "")
            cols[i].mode = "<label  ";
        else if (cols[i].mode == "<textarea")
            cols[i].mode = '<textarea  class="form-control rounded" ';
        mode = cols[i].mode + " id='" + cols[i].name + id + "'/>";


        if (cols[i].head.indexOf("自定栏位") == 0) continue;


        pg.append('<div class="form-group">'
            + '<label class="col-sm-' + colleft + ' control-label">' + cols[i].head + '</label><div class="col-sm-' + colright + '">'
            + mode + '</div></div>')


        pg.append('<div class="line line-dashed b-b line-lg pull-in"></div>');


    }


    if (that.settings.btnend) {
        pg.append(that.settings.btnend);
    }


    //控件数组 
    //顺便加上验证
    //顺便加上回车转TAB
    var tbs = [];
    for (var i = 0; i < length; i++) {
        if (cols[i].head.indexOf("自定栏位") == 0) continue;
        var input = $("#" + cols[i].name + id);


        if (cols[i].v != null) {
            if (cols[i].v.date != null) {
                //input.datepicker().datepicker("option", "dateFormat", "yy-mm-dd");
                input.datepicker({ format: 'yyyy-mm-dd' });
            }
            input.validate78('bind', cols[i].v);//.validate78('yzshow');
        }
        tbs.push(input);
    }
    that.settings.tbs = tbs;


    var $inp = $(':text');


    $inp.bind('keydown', function (e) {
        var key = e.which;
        if (key == 13) {
            e.preventDefault();
            var nxtIdx = $inp.index(this) + 1;
            if (nxtIdx <= $inp.length - 1)
                $inp[nxtIdx].focus();


        }
    });


    if (that.settings.oninihtml != null)
        that.settings.oninihtml();
}


/**
 *验证所有文本框 
 */
page78.prototype.checkalltb = function () {
    var that = this;
    var tbs = that.settings.tbs;
    var length = tbs.length;
    var allok = true;


    for (var i = 0; i < length; i++) {
        if (!tbs[i].validate78('yzshow')) {
            tbs[i].focus();


            return false;
        }
    }


    return true;
}


/**
 * 载入数据 
 */
page78.prototype.loadrows = function () {
    var that = this;
    var id = this.settings.tb;
    api78({
        url: that.settings.url, m: that.settings.getm
        , pars: that.settings.loadrowspars, bcid: that.settings.bcid
        , cols: that.settings.dbcols, mid: that.settings.mid
        , back: function (data) {
            if (data.length >= 1) {
                data = data[0];
                that.settings.source = data;
                var cols = that.settings.cols;
                var length = cols.length;


                for (var i = 0; i < length; i++) {
                    if (cols[i].mode.indexOf("<label") == 0)
                        $("#" + cols[i].name + id).text(data[cols[i].name]);
                    else {
                        $("#" + cols[i].name + id).val(data[cols[i].name]).validate78('yzshow');
                    }
                }
            }
            that.checkalltb();


            if (that.settings.onallload != null)
                that.settings.onallload();
        }
    });
}


page78.prototype.save = function () {
    var that = this;


    if (that.settings.onsavebef != null) {
        if (!that.settings.onsavebef()) {
            return;
        }
    }
    var id = this.settings.tb;
    var mid = that.settings.mid;
    var pars = [mid];
    var cols = that.settings.cols;
    var length = cols.length;


    for (var i = 0; i < length; i++) {
        if (cols[i].head.indexOf("自定栏位") == 0) continue;
        if (cols[i].mode != undefined && cols[i].mode.indexOf("<label") == 0)
            pars.push($("#" + cols[i].name + id).text());
        else {
            var input = $("#" + cols[i].name + id);
            if (!input.validate78('yzshow')) {
                input.focus();
                return true;
            }
            pars.push(input.val());
        }
    }




    api78({
        url: that.settings.url,
        m: that.settings.m, pars: pars, mid: mid,
        back: function (data) {
            if (data.length == 36) data = "保存成功";
            alert78(data);
        }
    });


}