カスケード分類作ってみた!
SharePointにはカスケード分類という機能が無いのでJavascriptで無理やり作ってみましたw
大分類、中分類という選択肢列を作り、大分類の選択されている値によって中分類の選択出来る値が変化するってヤツです。。
……かなり無理な方法ですけどね^^;
方法は新規、編集フォームにコンテンツエディタWebパーツを配置してJavascriptを組み込みます。
みなさんよくやってる(?)手法ですねw
今回はキャプチャは無しです(つД`)
分類はこんな感じでやってみます。
大分類-野菜
中分類-にんじん
中分類-じゃがいも
中分類-たまねぎ
大分類-果物
中分類-りんご
中分類-みかん
中分類-ぶとう
何をするかと言うと、大分類コントロールにonchangeイベントを追加して
そのイベント内で中分類コントロールの値を変化させます。
<script type="text/javascript">
<!--
//コントロールのIDを変数にセット
Control1_ID = "ctl00-------"; //大分類コントロール
Control2_ID = "ctl00-------"; //中分類コントロール
//中分類の値を変数にセット
b0num = 4;
data0 = new Array(b0num);
data0[0] = '';
data0[1] = 'にんじん';
data0[2] = 'じゃがいも';
data0[3] = 'たまねぎ';
b1num = 4;
data1 = new Array(b1num);
data1[0] = '';
data1[1] = 'りんご';
data1[2] = 'みかん';
data1[3] = 'ぶどう';
//ロード時に実行されるイベント
_spBodyOnLoadFunctionNames.push("setControl");
//大分類のコントロールにonchangeイベントを追加
function setControl()
{
var Control1=document.getElementById(Control1_ID);
Control1.attachEvent('onchange', DropEvent);
//中分類をセット
ItemCange();
}
//ドロップダウンのonchangeイベント
function DropEvent()
{
ItemCange();
}
//現在選択されている大分類の値に対する中分類の値をセット
function ItemCange()
{
var Control1=document.getElementById(Control1_ID);
var Control2=document.getElementById(Control2_ID);
//現在選択されている大分類の値
var Control1Value=Control1.options[Control1.selectedIndex].value;
//現在選択されている中分類の値
var Control2Value=Control2.options[Control2.selectedIndex].value;
if(Control1Value == "野菜")
{
Control2.length = b0num;
for(i=0; i<b0num; i++)
{
Control2.options[i].text = data0[i];
Control2.options[i].value = data0[i];
if(data0[i] == Control2Value)
{
Control2.selectedIndex = i;
}
}
}
else if(Control1Value == "果物")
{
Control2.length = b1num;
for(i=0; i<b1num; i++)
{
Control2.options[i].text = data1[i];
Control2.options[i].value = data1[i];
if(data1[i] == Control2Value)
{
Control2.selectedIndex = i;
}
}
}
else
{
Control2.length = 1;
Control2.options[0].text = "";
Control2.options[0].value = "";
}
}
-->
</script>
こんな感じです。
ちなみにIE以外での動作確認はしていません。
(FireFoxだとたぶん動かないです)
頑張れば小分類とかも作れますね~。
ただし、メンテナンスがかなり大変ですが……orz
どうしてもカスケード分類を実現しないとならなかったので、こんな事をしてみたって事でご紹介~w
大分類、中分類という選択肢列を作り、大分類の選択されている値によって中分類の選択出来る値が変化するってヤツです。。
……かなり無理な方法ですけどね^^;
方法は新規、編集フォームにコンテンツエディタWebパーツを配置してJavascriptを組み込みます。
みなさんよくやってる(?)手法ですねw
今回はキャプチャは無しです(つД`)
分類はこんな感じでやってみます。
大分類-野菜
中分類-にんじん
中分類-じゃがいも
中分類-たまねぎ
大分類-果物
中分類-りんご
中分類-みかん
中分類-ぶとう
何をするかと言うと、大分類コントロールにonchangeイベントを追加して
そのイベント内で中分類コントロールの値を変化させます。
<script type="text/javascript">
<!--
//コントロールのIDを変数にセット
Control1_ID = "ctl00-------"; //大分類コントロール
Control2_ID = "ctl00-------"; //中分類コントロール
//中分類の値を変数にセット
b0num = 4;
data0 = new Array(b0num);
data0[0] = '';
data0[1] = 'にんじん';
data0[2] = 'じゃがいも';
data0[3] = 'たまねぎ';
b1num = 4;
data1 = new Array(b1num);
data1[0] = '';
data1[1] = 'りんご';
data1[2] = 'みかん';
data1[3] = 'ぶどう';
//ロード時に実行されるイベント
_spBodyOnLoadFunctionNames.push("setControl");
//大分類のコントロールにonchangeイベントを追加
function setControl()
{
var Control1=document.getElementById(Control1_ID);
Control1.attachEvent('onchange', DropEvent);
//中分類をセット
ItemCange();
}
//ドロップダウンのonchangeイベント
function DropEvent()
{
ItemCange();
}
//現在選択されている大分類の値に対する中分類の値をセット
function ItemCange()
{
var Control1=document.getElementById(Control1_ID);
var Control2=document.getElementById(Control2_ID);
//現在選択されている大分類の値
var Control1Value=Control1.options[Control1.selectedIndex].value;
//現在選択されている中分類の値
var Control2Value=Control2.options[Control2.selectedIndex].value;
if(Control1Value == "野菜")
{
Control2.length = b0num;
for(i=0; i<b0num; i++)
{
Control2.options[i].text = data0[i];
Control2.options[i].value = data0[i];
if(data0[i] == Control2Value)
{
Control2.selectedIndex = i;
}
}
}
else if(Control1Value == "果物")
{
Control2.length = b1num;
for(i=0; i<b1num; i++)
{
Control2.options[i].text = data1[i];
Control2.options[i].value = data1[i];
if(data1[i] == Control2Value)
{
Control2.selectedIndex = i;
}
}
}
else
{
Control2.length = 1;
Control2.options[0].text = "";
Control2.options[0].value = "";
}
}
-->
</script>
こんな感じです。
ちなみにIE以外での動作確認はしていません。
(FireFoxだとたぶん動かないです)
頑張れば小分類とかも作れますね~。
ただし、メンテナンスがかなり大変ですが……orz
どうしてもカスケード分類を実現しないとならなかったので、こんな事をしてみたって事でご紹介~w
スポンサーサイト
● COMMENT FORM ●
トラックバック
http://sharepointyuzuki.blog54.fc2.com/tb.php/16-8ac81853
この記事にトラックバックする(FC2ブログユーザー)
返信が遅くなり大変申し訳ありません。。。
プロフィール欄(ブログ左上)にメールアドレスを記載しましたので、そちらを御覧頂けますでしょうか?
今度とも当ブログをよろしくお願い致します。