近段时间做项目， 有个需求。查询用户对应时间段的数据，并且可以对选中的内容做更改。
看到这个需求，一下就想到了bootstrapTable。
这是成品样式。
<div id = "updateDiv" style="display: none;">
<div id = "ch1">
<input type="checkbox" id ="typeInfo" name = "typeInfo" value ="常温">常温
<input type="checkbox" id ="typeInfo" name = "typeInfo" value ="冷冻">冷冻
<input type="checkbox" id ="typeInfo" name = "typeInfo" value ="冷藏">冷藏
</div>
<div id = "ch2">
<input type="checkbox" id ="jobInfo" name="jobInfo" value ="拣货">拣货
<input type="checkbox" id ="jobInfo" name="jobInfo" value ="收货">收货
<input type="checkbox" id ="jobInfo" name="jobInfo" value ="装车">装车
<input type="checkbox" id ="jobInfo" name="jobInfo" value ="上架">上架
<input type="checkbox" id ="jobInfo" name="jobInfo" value ="补货">补货
</div>
<div>
<input type="text" class="time-input" id="startOpTime" style="width:40%;" placeholder="开始时间"/>
<span>-</span>
<input type="text" class="time-input" id="endOpTime" style="width:40%;" placeholder="结束时间" />
</div>
</div>
<table id="recordList"></table>
$(function () {
//设置复选框只能选择一个
getCheckBox();
//初始化数据加载
getColumns();
laydate.render({
elem: '#startOpTime',//指定元素
type: 'datetime'
});
laydate.render({
elem: '#endOpTime',//指定元素
type: 'datetime'
});
function getCheckBox() {
$('#ch1').find('input[type=checkbox]').bind('click', function(){
var ss= $("[name=typeInfo]");
for (var i = 0; i < ss.length; i++) {
ss[i].checked = false;
}
this.checked = true;
});
$('#ch2').find('input[type=checkbox]').bind('click', function(){
var ss= $("[name=jobInfo]");
for (var i = 0; i < ss.length; i++) {
ss[i].checked = false;
}
this.checked = true;
});
}
//初始化复选框
function resetCheckBoxAndTime() {
var ss= $("input[type=checkbox]");
for (var i = 0; i < ss.length; i++) {
ss[i].checked = false;
}
$("#startOpTime").val(null);
$("#endOpTime").val(null);
}
function getDate() {
var data;
data = {
"total":"13",
"rows":[{
"2020-10-11":[{
"type":"",
"job":"",
"timeDate":[{
"startDate":"08:00",
"endDate":"22:00"
}]
}],
"2020-10-12":[{
"type":"常温",
"job":"拣货",
"timeDate":[{
"startDate":"08:00",
"endDate":"22:00"
}]
}],
"2020-10-13":[{
"type":"常温",
"job":"拣货",
"timeDate":[{
"startDate":"08:00",
"endDate":"22:00"
}]
}],
"2020-10-14":[{
"type":"冷冻",
"job":"上架",
"timeDate":[{
"startDate":"08:00",
"endDate":"24:00"
}]
}],
"userName":"张三",
"userId":"1"
},{
"2020-10-11":[{
"type":"常温",
"job":"拣货",
"timeDate":[{
"startDate":"08:00",
"endDate":"22:00"
}]
}],
"2020-10-12":[{
"type":"常温",
"job":"拣货",
"timeDate":[{
"startDate":"08:00",
"endDate":"21:00"
}]
}],
"2020-10-13":[{
"type":"冷冻",
"job":"上架",
"timeDate":[{
"startDate":"08:00",
"endDate":"22:00"
}]
}],
"2020-10-14":[{
"type":"常温",
"job":"拣货",
"timeDate":[{
"startDate":"08:00",
"endDate":"22:00"
}]
}],
"userName":"李四",
"userId":"1"
},{
"2020-10-11":[{
"type":"常温",
"job":"拣货",
"timeDate":[{
"startDate":"08:00",
"endDate":"11:00"
}]
}],
"2020-10-12":[{
"type":"常温",
"job":"拣货",
"timeDate":[{
"startDate":"08:00",
"endDate":"10:00"
}]
}],
"2020-10-13":[{
"type":"冷冻",
"job":"上架",
"timeDate":[{
"startDate":"08:00",
"endDate":"23:00"
}]
}],
"2020-10-14":[{
"type":"冷冻",
"job":"上架",
"timeDate":[{
"startDate":"08:00",
"endDate":"22:00"
}]
}],
"userName":"王二麻子",
"userId":"1"
}]
}
return data;
}
function getColumns() {
var returnValue = getDate();
var data = returnValue.rows;
var dateStrArr=getDateStrArr();
var mycolumn=[];
//console.log(dateStrArr);
mycolumn=[
{field: 'userName', title:"用户", align: 'center'},
]
for(var s in dateStrArr) {
var str = dateStrArr[s];
mycolumn.push({
field: str,
title: str,
align: 'center',
valign: 'middle',
formatter: function (value,row,index) {
for(var i in value) {
var str;
var br;
if(value[i].type==''){
str = "";
br = "";
}else{
str = "、";
br = "<br/>";
}
//console.log(value[i].type);
return "<a href='javascript:;' title='事项' style='font-size: 15px;color:#FA7310'>" + value[i].type+str+value[i].job+br+value[i].timeDate[0].startDate+"~" +value[i].timeDate[0].endDate+ "</a>";
}
}
})
}
$('#recordList').bootstrapTable({
data:data,
cache:false,
pagination: false,
dataField: 'rows',
toolbar: '#toolbar',
striped: true,
clickToSelect: true,
showColumns: true,
showRefresh: true,
showToggle: true,
columns: mycolumn,
//点击表格，可以获取到当前的所点击的信息
onClickCell:function(field, value, row, $element)
{
//这两个个字段记录从后台传过来的事项是否为空，为空就不去赋值
var startTime;
var endTime;
//再创建两个字符串，记录库区和岗位，要传到后台
var kq;
var gw;
resetCheckBoxAndTime();
if(field=="userName"){
alert("此列不可修改");
return;
}
//alert(field);
//alert(value);
//alert(JSON.stringify(row.userId));
//$("#updateDiv").val(value);
//循环复选框，默认选中后台传过来的值
for(var info in value) {
var unitTypeCheckbox=$("input[name='typeInfo']");
for(var i=0;i<unitTypeCheckbox.length;i++){
if(unitTypeCheckbox[i].value==value[info].type){
unitTypeCheckbox[i].checked=true;
}
}
var unitJobCheckbox=$("input[name='jobInfo']");
for(var i=0;i<unitJobCheckbox.length;i++){
if(unitJobCheckbox[i].value==value[info].job){
unitJobCheckbox[i].checked=true;
}
}
//给开始时间和结束时间赋值
startTime = value[info].timeDate[0].startDate;
endTime = value[info].timeDate[0].endDate;
}
//给时间插件赋值
if(startTime!=null){
$("#startOpTime").val(field+" "+startTime+":00");
}
if(endTime!=null){
$("#endOpTime").val(field+" "+endTime+":00");
}
var btns = {
btn : ["确定","取消"],
yes : function(index, layero) {//保存
var upIndex = $element.data('index');
//获取库区复选框选中的值
$('input[name="typeInfo"]:checked').each(function(){
kq = $(this).val();
});
//获取岗位复选框选中的值
$('input[name="jobInfo"]:checked').each(function(){
gw = $(this).val();
});
startTime = $("#startOpTime").val();
console.log(startTime);
endTime = $("#endOpTime").val();
console.log(endTime);
/*$('#recordList').bootstrapTable('updateRow', {
index: upIndex,
value: row.field
});*/
layer.close(index);
},
//点击取消的时候
btn2 : function(index, layero) {//清空
}
};
layer.open($.extend({
type : 1,
shadeClose : false,
area : [ '23%', '23%' ],
title : row.userName +" "+ field +"的排班",
maxmin: true,
cancel : function(){
return true;
},
end: function(index){
return true;
},
shade : 0.5,
scrollbar : false,
btnAlign : 'c', // 居中
content : $("#updateDiv")
},btns));
}
});
}
//获取开始时间和结束时间中间的天数
function getDateStrArr() {
var dateStrArr=[];
var beginDate = "2020-10-10";
var endDate = "2020-10-15";
var date_count = GetNumberOfDays(beginDate, endDate);
for (var i = 0; i <= date_count; i++) {
var date_add = new Date(beginDate).setDate(new Date(beginDate).getDate() + i);
var date =formatDateFromStr(date_add);
dateStrArr.push(date);
}
;
return dateStrArr;
};
//获得天数
function GetNumberOfDays(date1, date2) {
var a1 = Date.parse(new Date(date1));
var a2 = Date.parse(new Date(date2));
//核心：时间戳相减，然后除以天数
var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24));
return day
};
//日期格式转换年月日
function formatDateFromStr(str) {
return StringToTime(str,"yyyy-MM-dd");
}
})
记录一下碰到的问题。
最开始碰到的问题就是数据格式的问题。因为要拿JSON数据在代码里生成bean，但是一个用户下面有多个时间段数据，怎么才能生成呢？
最开始我是这样弄得
public class SchedulingInfoBean {
private List<RowsBean> rows;
public List<RowsBean> getRows() {
return rows;
}
public void setRows(List<RowsBean> rows) {
this.rows = rows;
}
public static class RowsBean{
private Map<String, Object> info;
private String userName;
private String userId;
public void setUserName(String userName){
this.userName = userName;
}
public String getUserName(){
return this.userName;
}
public void setUserId(String userId){
this.userId = userId;
}
public String getUserId(){
return this.userId;
}
public Map<String, Object> getInfo() {
return info;
}
public void setInfo(Map<String, Object> info) {
this.info = info;
}
public static class SchedulingBean{
private String id;
private String type;
private String job;
private String pid;
private String zid;
private String classesId;
private List<TimeDateBean> timeDate;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public void setType(String type){
this.type = type;
}
public String getType(){
return this.type;
}
public void setJob(String job){
this.job = job;
}
public String getJob(){
return this.job;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public String getZid() {
return zid;
}
public void setZid(String zid) {
this.zid = zid;
}
public String getClassesId() {
return classesId;
}
public void setClassesId(String classesId) {
this.classesId = classesId;
}
public void setTimeDate(List<TimeDateBean> timeDate){
this.timeDate = timeDate;
}
public List<TimeDateBean> getTimeDate(){
return this.timeDate;
}
public static class TimeDateBean{
private String startDate;
private String endDate;
public void setStartDate(String startDate){
this.startDate = startDate;
}
public String getStartDate(){
return this.startDate;
}
public void setEndDate(String endDate){
this.endDate = endDate;
}
public String getEndDate(){
return this.endDate;
}
}
}
}
}
但是这样生成的数据，虽然是拿时间作为key了，但是外面却包了一层info。一直想着怎么去掉这个info。然后走进了死胡同。其实很简单，不要把rows里的数据当成一个正常对象。把他想成一个JSON。这样的话，我们就可以把想要的数据先拼成JSON，再存到rows中。这样就不会出现再包一层的情况。
public class SchedulingInfoBean {
private List<JSON> rows;
public List<JSON> getRows() {
return rows;
}
public void setRows(List<JSON> rows) {
this.rows = rows;
}
public static class RowsBean{
private Map<String, Object> info;
public Map<String, Object> getInfo() {
return info;
}
public void setInfo(Map<String, Object> info) {
this.info = info;
}
public static class SchedulingBean{
private String id;
private String type;
private String job;
private String pid;
private String zid;
private String classesId;
private List<TimeDateBean> timeDate;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public void setType(String type){
this.type = type;
}
public String getType(){
return this.type;
}
public void setJob(String job){
this.job = job;
}
public String getJob(){
return this.job;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public String getZid() {
return zid;
}
public void setZid(String zid) {
this.zid = zid;
}
public String getClassesId() {
return classesId;
}
public void setClassesId(String classesId) {
this.classesId = classesId;
}
public void setTimeDate(List<TimeDateBean> timeDate){
this.timeDate = timeDate;
}
public List<TimeDateBean> getTimeDate(){
return this.timeDate;
}
public static class TimeDateBean{
private String startDate;
private String endDate;
public void setStartDate(String startDate){
this.startDate = startDate;
}
public String getStartDate(){
return this.startDate;
}
public void setEndDate(String endDate){
this.endDate = endDate;
}
public String getEndDate(){
return this.endDate;
}
}
}
}
}
本来RowsBean中存放的是一个map,和两个字符串，现在我们可以把两个字符串一起放到map中转成JSON对象，再丢到rows中。就完美的解决了问题。
其次就是，设置页面复选框 ，有且仅有选中一个值
<div id = "ch1">
<!-- <input type="checkbox" id ="typeInfo" name = "typeInfo" value ="常温">常温
<input type="checkbox" id ="typeInfo" name = "typeInfo" value ="冷冻">冷冻
<input type="checkbox" id ="typeInfo" name = "typeInfo" value ="冷藏">冷藏 -->
</div>
function getCheckBox() {
$('#ch1').find('input[type=checkbox]').bind('click', function(){
var ss= $("[name=typeInfo]");
var a = 0;
if(this.checked == false){
a = 1;
}
for (var i = 0; i < ss.length; i++) {
ss[i].checked = false;
}
if(a==1){
this.checked = false;
}else{
this.checked = true;
}
});
虽然不是个好办法，但是确实满足我当前的需求。
最后就是 页面选择的两个时间，判断结束时间不可以小于开始时间。
function validateTimePeriod(assigntime, deadlinetime) {
var reg = new RegExp('-','g');
assigntime = assigntime.replace(reg,'/');//正则替换
deadlinetime = deadlinetime.replace(reg,'/');
assigntime = new Date(parseInt(Date.parse(assigntime),10));
deadlinetime = new Date(parseInt(Date.parse(deadlinetime),10));
if(assigntime>deadlinetime){
return false;
}else{
return true;
}
}
用正则表达式来做验证判断。
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
