columns陣列形式展示不同列資料

騷裡騷氣1發表於2018-12-13
function workList() {
var status = $("#status1").val();
if (null == status || status == "") {
status = $("select[name=`status`]").val();
}
var workStatus;
switch (status) {
case `1`://待辦
workStatus = [
{
field: `id111`,
width: 60,
title: "序號",
align: `center`,
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: `title`,
title: `任務名稱`,
width: 300,
formatter: function (value, row, index) {
var nameIcon = `<span class="edit cursorPointer" title="` + value + `" >` + value + `</span>`;
return [nameIcon].join(``);
},
events: {
`click .edit`: function (e, value, row, index) {
waitViewTask(row.id);
}
}
},
{
field: `zrrName`,
title: `責任人`,
align: `center`,
width: 100,
formatter: function (value, row, index) {
var nameIcon = `<span class="edit cursorPointer" title="` + value + `">` + value + `</span>`;
return [nameIcon].join(``);
},
},

{
field: `xbrName`,
align: `center`,
title: `協辦人`,
width: 100,
formatter: function (value, row, index) {
var nameIcon = `<span class="edit cursorPointer" title="` + value + `">` + value + `</span>`;
return [nameIcon].join(``);
},
},
{
field: `leaderName`,
title: `分管領導`,
align: `center`,
width: 100,
},
{
field: `startDate`,
title: `交辦日期`,
align: `center`,
sortable: true,
order: `desc`,
width: 120
}, {
field: `dueDate`,
title: `完成日期`,
align: `center`,
sortable: true,
order: `desc`,
width: 120
},
{
field: `operator2`,
title: `操作`,
align: `center`,
valign: `middle`,
searchable: false,
clickToSelect: false,
width: 200,
formatter: function (value, row, index) {
var planIcon = ``;
if (!!row && row.length > 0) {
for (var i = 0; i < row.length; i++) {
var user = row[i];
if (!!user && user.personnelType === `2`) {
if ($("#nowUserId").val() === user.user.id) {
planIcon = `<div align="center"><span class="planIcon cursorPointer" data-toggle="modal" >【計劃】</span>`;
break;
}
}
}
}
var editIcon = `<span class="editIcon cursorPointer">【工作辦理】</span></div>`;
return [planIcon, editIcon].join(``);
},
events: {
`click .editIcon`: function (e, value, row, index) {
waitViewTask(row.id);
},
`click .planIcon`: function (e, value, row, index) {
jihua(row);
}
}
}
];
break;
case `2`://超期
workStatus = [{
field: `id`,
title: `ID`,
visible: false
},
{
field: `id111`,
width: 60,
title: "序號",
visible: true,
align: `center`,
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: `title`,
title: `任務名稱`,
// align:`center`,
width: 220,
formatter: function (value, row, index) {
var nameIcon = `<span class="edit cursorPointer" title="` + value + `" >` + value + `</span>`;
return [nameIcon].join(``);
},
events: {
`click .edit`: function (e, value, row, index) {
timeOutViewTask(row.id)
},
}
},
{
field: `zrrName`,
title: `責任人`,
align: `center`,
width: 80,
formatter: function (value, row, index) {
var nameIcon = `<span class="edit cursorPointer" title="` + value + `">` + value + `</span>`;
return [nameIcon].join(``);
},
},
{
field: `xbrName`,
title: `協辦人`,
align: `center`,
width: 80,
formatter: function (value, row, index) {
var nameIcon = `<span class="edit cursorPointer" title="` + value + `">` + value + `</span>`;
return [nameIcon].join(``);
},
},
{
field: `leaderName`,
title: `分管領導`,
align: `center`,
width: 70
},
{
field: `startDate`,
title: `交辦日期`,
align: `center`,
sortable: true,
order: `desc`,
width: 80
},
{
field: `dueDate`,
title: `完成日期`,
align: `center`,
sortable: true,
order: `desc`,
width: 80
}
,
/* {
field: `betweenDay`,
title: `超期天數`,
align: `center`,
width: 80,
sortable: true,
order: `desc`,
},*/
{
field: `status`,
title: `狀態`,
align: `center`,
//valign: `middle`,
width: 60,
formatter: function (value, row, index) {
if (value == `2`) {
var nameIcon = `<span style="width:14px;height:14px;border-radius: 50%;display:inline-block;margin-right:10px" class="edit cursorPointer" title="已超期"></span>`;
return `<span></span>` + [nameIcon].join(``);
} else if (value == `1`) {
var nameIcon = `<span style="width:14px;height:14px;border-radius: 50%;display:inline-block;margin-right:10px" class="edit cursorPointer" title="進行中"></span>`;
return `<span></span>` + [nameIcon].join(``);
} else if (value == `0`) {
var nameIcon = `<span style="width:14px;height:14px;border-radius: 50%;display:inline-block;margin-right:10px" class="edit cursorPointer" title="暫存"></span>`;
return `<span></span>` + [nameIcon].join(``);
} else if (value == `3` || value == `4`) {
var nameIcon = `<span style="width:14px;height:14px;border-radius: 50%;display:inline-block;margin-right:10px" class="edit cursorPointer" title="已辦結"></span>`;
return `<span></span>` + [nameIcon].join(``);
}
return "-";
}
},
{
field: `operator2`,
title: `操作`,
align: `center`,
valign: `middle`,
searchable: false,
clickToSelect: false,
width: 100,
formatter: function (value, row, index) {
var editIcon = `<span class="editIcon cursorPointer">【工作辦理】</span></div>`;
return [editIcon].join(``);
},
events: {
`click .editIcon`: function (e, value, row, index) {
selectThing(row);
},
`click .delayIcon`: function (e, value, row, index) {
if (row.ifDelay == `1`) {
layer.msg("您已經申請延期,正在等待稽核。。")
} else {
selectThing(row);
}
},
`click .endIcon`: function (e, value, row, index) {
selectThing(row);
}
}
}
];
break;
case `5`://已辦結
workStatus = [{
checkbox: true,
visible: false
},
{
field: `id111`,
width: 45,
title: "序號",
align: `center`,
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: `title`,
title: `任務名稱`,
// align:`center`,
width: 220,
formatter: function (value, row, index) {
var nameIcon = `<span class="edit cursorPointer" title="` + value + `" >` + value + `</span>`;
return [nameIcon].join(``);
},
events: {
`click .edit`: function (e, value, row, index) {
completedViewTask(row.id)
},
}
},
{
field: `zrrName`,
title: `責任人`,
align: `center`,
width: 70,
formatter: function (value, row, index) {
var nameIcon = `<span class="edit cursorPointer" title="` + value + `">` + value + `</span>`;
return [nameIcon].join(``);
},
}, {
field: `xbrName`,
title: `協辦人`,
align: `center`,
width: 70,
formatter: function (value, row, index) {
var nameIcon = `<span class="edit cursorPointer" title="` + value + `">` + value + `</span>`;
return [nameIcon].join(``);
}
},
{
field: `leaderName`,
title: `分管領導`,
align: `center`,
width: 70
},
{
field: `startDate`,
title: `交辦日期`,
align: `center`,
sortable: true,
order: `desc`,
width: 80
},
{
field: `dueDate`,
title: `完成日期`,
align: `center`,
sortable: true,
order: `desc`,
width: 80
},
{
field: `eDueDate`,
title: `實際辦結時間`,
align: `center`,
width: 90,
sortable: true,
order: `desc`,
},
/* {
field: `betweenDay`,
title: `超期天數`,
align: `center`,
width: 80,
sortable: true,
order: `desc`,
},*/
{
field: `status`,
title: `狀態`,
align: `center`,
sortable: true,
order: `desc`,
// valign: `middle`,
width: 60,
formatter: function (value, row, index) {
if (value == `2`) {
var nameIcon = `<span style="width:14px;height:14px;border-radius: 50%;display:inline-block;margin-right:10px" class="edit cursorPointer" title="已超期"></span>`;
return `<span></span>` + [nameIcon].join(``);
} else if (value == `1`) {
var nameIcon = `<span style="width:14px;height:14px;border-radius: 50%;display:inline-block;margin-right:10px" class="edit cursorPointer" title="進行中"></span>`;
return `<span></span>` + [nameIcon].join(``);
} else if (value == `0`) {
var nameIcon = `<span style="width:14px;height:14px;border-radius: 50%;display:inline-block;margin-right:10px" class="edit cursorPointer" title="暫存"></span>`;
return `<span></span>` + [nameIcon].join(``);
} else if (value == `3` || value == `4`) {
var nameIcon = `<span style="width:14px;height:14px;border-radius: 50%;display:inline-block;margin-right:10px" class="edit cursorPointer" title="已辦結"></span>`;
return `<span></span>` + [nameIcon].join(``);
}
return "-";
}
}
];
break;
}
console.log("進來我的工作")
$("#workListForm")[0].reset();
$(`#workList`).bootstrapTable({//待辦任務workList
method: `post`,
url: `v2/myWork/workDateList`,
silent: true,
cache: false,
pagination: true,
height: window.bsTableHeight - 70,
contentType: `application/x-www-form-urlencoded`,
showHeader: true,//是否顯示列頭。
pageSize: 10, //每頁的記錄行數(*)
pageList: [10, 20, 30, 40], //可供選擇的每頁的行數(*)
showColumns: false,//是否顯示內容列下拉框。
clickToSelect: true,//設定 true 將在點選行時,自動選擇 rediobox 和 checkbox。?
sidePagination: `server`,//設定在哪裡進行分頁,可選值為 `client` 或者 `server`。設定 `server`時,必須設定伺服器資料地址(url)或者重寫ajax方法。
sortOrder: `desc`,
sortName: `startDate`,
queryParams: searchParam,
singleSelect: true,
responseHandler: function (data) {
data = FastJson.format(data);
return data;
},
columns: workStatus,
});
}

相關文章