//单行表单控件
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&uin=657225485&site=qq&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);
}
});
}
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&uin=657225485&site=qq&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);
}
});
}