新規投稿
フォローする

赤文字に表示させたい

公開されているサンプルを加工して利用しようと思っています。

https://developer.cybozu.io/hc/ja/articles/202640870

//差異のマイナス値を赤色に変更 のように

工数差異(実績/見積)のほうも100%を超過した場合に赤文字にさせたいです。

 

コードと{}の位置などがよくわからず、どこに書けばいいのかまで教えて頂けると助かります。

 


/*
* カスタマイズビューのサンプルプログラム
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
*/
jQuery.noConflict();
(function($) {

"use strict";
//工数見積管理アプリを全レコード取得
function fetchRecords(appId, opt_offset, opt_limit, opt_records) {
var app_yosan = kintone.app.getLookupTargetAppId("顧客名"); //工数見積管理アプリID
var offset = opt_offset || 0;
var limit = opt_limit || 100;
var allRecords = opt_records || [];
var params = {app: app_yosan, query: 'order by レコード番号 asc limit ' + limit + ' offset ' + offset};
return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params).then(function(resp) {
allRecords = allRecords.concat(resp.records);
if (resp.records.length === limit) {
return fetchRecords(appId, offset + limit, limit, allRecords);
}
return allRecords;
});
}
//実績管理データのカスタマイズビュー用データの作成
function makeYojitsuData(records, opt_data, opt_i) {
var i = opt_i || 0; //レコードのカウント
var allData = opt_data || []; //差異の集計結果
var appId = kintone.app.getId(); //実績管理アプリID
var key1, key2, key3, key4, key5;
key1 = records[i]['顧客名']['value'];
key1 = key1.replace(/</g, "&lt;").replace(/>/g, "&gt;");
key2 = records[i]['工数見積_時間']['value'];


var params = {'app': appId, 'query': '顧客名 = "' + key1 + '"'};
return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params).then(function(resp) {
if (resp.records) {
key3 = 0;
var obj = resp.records;
for (var j = 0; j < obj.length; j++) {
key3 += parseFloat(obj[j]['実績_時間']['value']);

}
key4 = parseFloat(key3, 10) - parseFloat(key2, 10);
key5 = parseFloat(key3, 10) / parseFloat(key2, 10) * 100;
key5 = key5.toFixed(2);
key5 += "%";
allData.push({segment: key1, budget: key2, results: key3, Difference: key4, AchievementRate: key5});
}else {
event.error = '実績管理情報が取得できません。';
}
i = i + 1;
if (records.length !== i) {
return makeYojitsuData(records, allData, i);
}
return allData;
});
}
//差異のマイナス値を赤色に変更
function cellDesign() {
$('#view tr td').each(function(index, elm) {
if ($(this).hasClass('Difference_class')) {
if ($(this).text().indexOf("-") > -1) {
$(this).css('color', '#ff0000');
}
}
});

}
//予実管理のカスタマイズビューを取得
function dispYojitsuCustomizeView(records) {
makeYojitsuData(records).then(function(data) {
//列の設定
var colModelSettings = [
{name: "segment", index: "segment", width: 300, align: "center",
classes: "segment_class"},
{name: "budget", index: "budget", width: 200, align: "right",
classes: "budget_class", formatter: 'currency', sorttype: "float"},
{name: "results", index: "results", width: 200, align: "right",
classes: "results_class", formatter: 'currency', sorttype: "float"},
{name: "Difference", index: "Difference", width: 200, align: "right",
classes: "Difference_class", formatter: 'currency', sorttype: "float"},
{name: "AchievementRate", index: "AchievementRate", width: 150, align: "center",
classes: "AchievementRate_class", sorttype: "float"}
];
//列の表示名
var colNames = ["顧 客 名", "工 数 見 積(時間)", "工 数 実 績(時間)", "工数差異(実績-見積)", "工数差異(実績/見積)"];
$("#view").jqGrid({
data: data,
datatype: "local",
colNames: colNames,
colModel: colModelSettings,
rowNum: 50,
rowList: [1, 10, 20,30,40,50],
caption: "工 数 時 差",
height: "auto",
width: "auto",
pager: 'pager',
shrinkToFit: true,
viewrecords: true,
gridComplete: function() {
cellDesign();
}
});
});
}
//イベント処理
kintone.events.on(['app.record.index.show'], function(event) {
var appId = kintone.app.getId(); //実績管理アプリID
fetchRecords(appId).then(function(records) {
dispYojitsuCustomizeView(records);
});
});

})(jQuery);
0

3件のコメント

Avatar
しぶい

tktktk さん

やり方は色々考えられますが、色を変えている処理は以下の部分です、この辺に記述するとコードとして綺麗かなと思います。

function cellDesign() {
$('#view tr td').each(function(index, elm) {
if ($(this).hasClass('Difference_class')) {
if ($(this).text().indexOf("-") > -1) {
$(this).css('color', '#ff0000');
}
}
});
}

"どこに書けばいいのかまで教えて頂けると助かります。" とのことなので処理は思い浮かんでいるのかなとは思いますが、
せっかくなので、自分が考えた処理も共有します。参考になるといいですが。

上記の処理は、差異(tktktk さんのアプリで言う 工数差異(実績-見積)) の値に "-" がある場合に赤くしています。
indexOf は指定した文字の位置を数値で返すので、-1 以上であれば、赤くする処理ですね。

100.00%以上の場合、indexOf 使うと % の位置の数値は 6 になるので、
工数差異(実績/見積) の値を取得して indexOf の "値が 6 の場合" 判定で赤くすればいいかなと思います。

ただ、"値が 6 の場合"だけだと、-10.00% とかも該当するのでその状況が考えられる場合は、"-" がついてない判定も必要です。

値が 1000.00% の場合は考えていませんが、もし普通に 1000.00% が出る場合は、"値が 6 の時" ではなく、"値が 6 以上の時" にするといいですね。もちろん "-" がついてない判定もつけて

しぶいにより編集されました
1
Avatar
tktktk

しぶいさん

回答ありがとうございます。

私の書き方が分かりづらくすみません。コード・処理は分かっておりません・・・

ご丁寧に解説をして頂いていますのでその処理で記述しようと思うのですが、

工数差異(実績/見積) の値を取得 というのはどこで分かるものなのでしょうか?

0
Avatar
しぶい

tktktk さん

該当の処理では、html の class で値取得してます。
サンプル処理で言うなら↓の部分です。

if ($(this).hasClass('Difference_class')) { // 工数差異(実績-見積)) 部分の要素取得
if ($(this).text().indexOf("-") > -1) { // 取得した要素のテキストから "-" の位置を見てる

}
}

工数差異(実績/見積) の部分は class が AchievementRate_class だったので
↓の処理を追加することになりますね。

if ($(this).hasClass('AchievementRate_class')) { // 工数差異(実績/見積) 部分の要素取得
~先ほどの処理~
}
0
サインインしてコメントを残してください。