1. diallog的用法
参考:https://www.ctolib.com/topics-76778.html
$(this).diglog({
type : 'warning',
content : '专家必须从库中选择!',
callback:function(){}
});
2. 下拉框的用法
<div id="div_pack"></div>
2.1来源于本地
$("#div_pack").select({
isShowAll : false,
title : "请选择包",
contents : [{
"title" : "请选择包...",
"value" : "a"
},
{
"title" : "a...",
"value" : "b"
},
{
"title" : "b...",
"value" : "c"
}],
name : "expertType",
width : 255,
changeCallback : function(data) {
var temp =data.getValue();
currentPackID = temp;
// $(this).diglog({
// type : 'warning',
// content : temp
// });
}
});
// 设置第一个为默认选中,此操作会调用changeCallback方法;
$('#div_pack').setValue(contents[1].value)
注意(可以设置默认选中):
$(’#div_pack’).setValue(contents[1].value)
获取选中的值
$("#div_pack").getValue()
2.2来源于网络
<label class="col-lg-1 control-label">采购方式</label>
<div class="col-lg-2"><div id="fkProjecttypeOneIdDiv"></div>
</div>
数据格式
```bash
[
{
"v":"0",
"publiccodeName":"公开招标",
"recordtime":"2014-10-11 08:14:58",
"parentCodeId":null,
"ignoreValues":null,
"publiccodeValues":"6",
"pkBasPubliccodeId":"45B41775-CDCF-4F98-80E9-F645A20CA096",
"publiccodeClass":"06"
},
{
"v":"0",
"publiccodeName":"竞争性谈判",
"recordtime":"2014-10-11 08:14:20",
"parentCodeId":null,
"ignoreValues":null,
"publiccodeValues":"5",
"pkBasPubliccodeId":"9EE56A11-F13E-4519-884B-323CCEADBBCB",
"publiccodeClass":"06"
}
]
请求方式
/**
* 采购方式列表
*/
function bindStockTypeList() {
initselect("fkProjecttypeOneIdDiv", true, "采购方式", basepath
+ "basPubliccode/getBasPubliccodelist.do?publiccodeClass=06",
"fkProjecttypeOneId", 160, "publiccodeName", "pkBasPubliccodeId");
}
/**
* 初始化下拉框
*
* @param divid
* 下拉框div的id
* @param isShowAll
* 是否在下拉中显示“全部”
* @param title
* 下拉框的title
* @param url 下拉框请求服务的url
* @param name 下拉框的name
* @param width 下拉框的宽度
* @param titleField 显示名称对应的字段
* @param valueField 值对应的字段
* @param disabled 是否不可编辑
* @param data 本地数据
* @param changeCallback 改变事件
* @param menuwidth下拉框显示框宽度
* @param menuheight下拉框显示框高度
* @param successCallback请求成功回调函数
* @param inputClass 下拉框中文本框的样式
* @param formatMethod 格式化方法
*/
function initselect(divid, isShowAll, title, url, name, width, titleField,
valueField, disabled, data, changeCallback, menuwidth, menuheight,
successCallback,inputClass,formatMethod) {
$("#" + divid).select({
inputClass:inputClass,
isShowAll : isShowAll,
title : title,
data : data,
url : url,
name : name,
width : width,
titleField : titleField,
valueField : valueField,
disabled : disabled,
changeCallback : changeCallback,
successCallback : successCallback,
menuwidth : menuwidth,
menuheight : menuheight,
formatMethod : formatMethod
});
}
## 3.Ajax请求
jsonAjax(
false, // 是否异步
"POST", // 请求方式
basepath + "bidBidfactorConfig/queryProjectBidSet.do", // 地址
{ // 参数
"pkTProjectInfoId": $("#fkTProjectInfoId").val(),
"isinvalidbid": "0",
"pagesize": 50,
"page": 1},
"json", // 返回值类型
function (data) { // 返回值回调方法,处理代码逻辑
var contents = [{"title": "请选择包...", "value": "0"}]
$(data.Rows).each(function (i, item) {
var temp = {"title": item.packName, "value": item.pkProjectpackInfoId};
contents.push(temp);
});
initSelect(contents);
}, "初始化包信息失败,请联系管理员!"); // 错误信息
bootstrap表格设置
## 3.吐司效果
```bash
$("#addOrEditForm").message({
type : 'success',
content : data.Message
});
bootstrap布局
网格选项
下表总结了 Bootstrap 网格系统如何跨多个设备工作:
超小设备手机(<768px) | 小型设备平板电脑(≥768px) | 中型设备台式电脑(≥992px) | 大型设备台式电脑(≥1200px | |
---|---|---|---|---|
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
基本的网格结构
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
以下代码表示在xs设备和sm设备上的比例
<div class="col-xs-6 col-sm-3" >`
偏移列
偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如,.col-xs-* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。
为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
在下面的实例中,我们有
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<div class="col-md-6 col-md-offset-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
</div>
</div>
嵌套列
为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。
在下面的实例中,布局有两个列,第二列被分为两行四个盒子。
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 - 分为四个盒子</h4>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.
</p>
</div>
</div>
</div>
</div>
</div>
列排序
Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。
在下面的实例中,我们有两列布局,左列很窄,作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。
时间格式化
decryptTime=1612349630877
new Date(decryptTime).Format("yyyy-MM-dd hh:mm")