scripts/m3opt1.2.1.js

   1 /**\r
   2  * Magic3Ajaxライブラリ\r
   3  *\r
   4  * JavaScript 1.5\r
   5  *\r
   6  * LICENSE: This source file is licensed under the terms of the GNU General Public License.\r
   7  *\r
   8  * @package    Magic3 Framework\r
   9  * @author     平田直毅(Naoki Hirata) <naoki@aplo.co.jp>\r
  10  * @copyright  Copyright 2006-2017 Magic3 Project.\r
  11  * @license    http://www.gnu.org/copyleft/gpl.html  GPL License\r
  12  * @version    SVN: $Id$\r
  13  * @link       http://www.magic3.org\r
  14  */\r
  15 /**\r
  16  * Ajax非同期通信\r
  17  * @param string request_widget         指定ウィジェット\r
  18  * @param string request_params         リクエストパラメータ\r
  19  * @param function success_func(request, retcode, jsondata)     通信成功時の呼び出し関数\r
  20  * @param function failure_func(request)                                        通信失敗時の呼び出し関数\r
  21  * @param bool async                            同期通信かどうか(true=非同期,false=同期)\r
  22  * @param string request_url            リクエスト先URL\r
  23  */\r
  24 function m3_ajax_request(request_widget, request_params, success_func, failure_func, request_url, async)\r
  25 {\r
  26         if (request_url == null || request_url == "") request_url = document.location.pathname;\r
  27         if (async == null) async = true;\r
  28         \r
  29         var params = "";\r
  30         if (request_widget != null && request_widget != "") params += "cmd=dowidget&widget=" + request_widget;\r
  31         if (request_params != null && request_params != "") params += "&" + request_params;\r
  32         \r
  33         $.ajax({        url: request_url,\r
  34                                 type:           'post',\r
  35                                 data:           params,\r
  36                                 dataType:       'json',\r
  37                                 async:          async,\r
  38                                 success:        function(data, textStatus){\r
  39                                                                 if (data) alert("JSON data must be in header with 'X-JSON' type");\r
  40                                                         },\r
  41                                 error:          function(request, textStatus, errorThrown){\r
  42                                                                 if (request.status == 200){\r
  43                                                                         var json = eval(request.getResponseHeader("X-JSON"));\r
  44                                                                         m3_ajax_success(request, json, success_func);\r
  45                                                                 } else {\r
  46                                                                         m3_ajax_failure(request, json, failure_func);\r
  47                                                                 }\r
  48                                                         }\r
  49                         });\r
  50 }\r
  51 /**\r
  52  * Ajax非同期通信(レスポンスボディも使用してデータを受信)\r
  53  * @param string request_widget         指定ウィジェット\r
  54  * @param string request_params         リクエストパラメータ\r
  55  * @param function success_func(request, retcode, jsondata)     通信成功時の呼び出し関数\r
  56  * @param function failure_func(request)                                        通信失敗時の呼び出し関数\r
  57  * @param string request_url            リクエスト先URL\r
  58  */\r
  59 function m3_ajax_request_ex(request_widget, request_params, success_func, failure_func, request_url)\r
  60 {\r
  61         if (request_url == null || request_url == "") request_url = document.location.pathname;\r
  62 \r
  63         var params = "";\r
  64         if (request_widget != null && request_widget != "") params += "cmd=dowidget&widget=" + request_widget;\r
  65         if (request_params != null && request_params != "") params += "&" + request_params;\r
  66         \r
  67         $.ajax({        url: request_url,\r
  68                                 type:           'post',\r
  69                                 data:           params,\r
  70                                 dataType:       'json',\r
  71                                 success:        function(data, textStatus){\r
  72                                                                 if (data) alert("JSON data must be in header with 'X-JSON' type");\r
  73                                                         },\r
  74                                 error:          function(request, textStatus, errorThrown){\r
  75                                                                 if (request.status == 200){\r
  76                                                                         var json = eval(request.getResponseHeader("X-JSON"));\r
  77                                                                         m3_ajax_success_ex(request, json, success_func, request.responseText);\r
  78                                                                 } else {\r
  79                                                                         m3_ajax_failure(request, json, failure_func);\r
  80                                                                 }\r
  81                                                         }\r
  82                         });\r
  83 }\r
  84 /**\r
  85  * Ajax非同期通信正常時に呼ばれるデフォルト関数\r
  86  * @param XMLHttpRequest request                サーバからのレスポンス\r
  87  * @param Object         json                   JSON型データ\r
  88  * @param function       success_func   呼び出し関数\r
  89  */\r
  90 function m3_ajax_success(request, json, success_func)\r
  91 {\r
  92         if (success_func == ''){\r
  93                 alert(request.statusText + "\nstatus code = " + request.status);\r
  94         } else if (success_func){\r
  95                 if (typeof success_func == "function"){\r
  96                         var retcode = -1;\r
  97                         var jsondata;\r
  98                         if (json != null){\r
  99                                 retcode = json.retcode;\r
 100                                 jsondata = json.data;\r
 101                         }\r
 102                         success_func(request, retcode, jsondata);\r
 103                 } else {\r
 104                         alert('cannot found success function');\r
 105                 }\r
 106         }\r
 107 }\r
 108 /**\r
 109  * Ajax非同期通信正常時に呼ばれるデフォルト関数\r
 110  * @param XMLHttpRequest request                サーバからのレスポンス\r
 111  * @param Object         json                   JSON型データ\r
 112  * @param function       success_func   呼び出し関数\r
 113  */\r
 114 function m3_ajax_success_ex(request, json, success_func, responseText)\r
 115 {\r
 116         if (success_func == ''){\r
 117                 alert(request.statusText + "\nstatus code = " + request.status);\r
 118         } else if (success_func){\r
 119                 if (typeof success_func == "function"){\r
 120                         var retcode = -1;\r
 121                         var jsondata;\r
 122                         if (json != null){\r
 123                                 retcode = json.retcode;\r
 124                                 if (json.data) jsondata = json.data;\r
 125                         }\r
 126                         success_func(request, retcode, jsondata, responseText);\r
 127                 } else {\r
 128                         alert('cannot found success function');\r
 129                 }\r
 130         }\r
 131 }\r
 132 /**\r
 133  * Ajax非同期通信の通信エラー時に呼ばれるデフォルト関数\r
 134  * @param XMLHttpRequest        request         サーバからのレスポンス\r
 135  */\r
 136 function m3_ajax_failure(request, json, failure_func)\r
 137 {\r
 138         if (failure_func == ''){\r
 139                 alert(request.statusText + "\nstatus code = " + request.status);\r
 140         } else if (failure_func){\r
 141                 if (typeof failure_func == "function"){\r
 142                         failure_func(request);\r
 143                 } else {\r
 144                         alert('cannot found failure function');\r
 145                 }\r
 146         }\r
 147 }\r
 148 /**\r
 149  * テーブルに縦のスクロールバー付加\r
 150  *\r
 151  *  テーブルの表示領域を指定行数に制限し、テーブルに縦のスクロールバー付加する\r
 152  *\r
 153  * @param object  object                        テーブルオブジェクトまたはテーブルID文字列\r
 154  * @param int     viewLineCount         表示行数(-1のときはスクロールバーなし)\r
 155  * @param int     viewTopLineNo         先頭に表示する行番号(0～)\r
 156  * @return なし\r
 157  */\r
 158 function m3_tableWithScrollbar(object, viewLineCount, viewTopLineNo)\r
 159 {\r
 160         var tHeight;            // 表示高さ\r
 161         var srcTable;           // テーブルオブジェクト\r
 162         \r
 163         if(!document.createElement) return;\r
 164         if(navigator.userAgent.match('Opera')) return;\r
 165 \r
 166         // テーブルのオブジェクトを取得\r
 167         if (typeof object == "string"){\r
 168                 srcTable = document.getElementById(object);\r
 169         } else {\r
 170                 srcTable = object;\r
 171         }\r
 172         if (!srcTable) return;\r
 173         var hasHead = (srcTable.tHead == null) ? false : true;          // ヘッダがあるかどうか\r
 174         var hasFoot = (srcTable.tFoot == null) ? false : true;          // フッタがあるかどうか\r
 175         \r
 176         // データ行数が表示行数よりも少ないときは終了\r
 177         var bodyRowCount = srcTable.tBodies[0].rows.length;     // データ行数\r
 178         if (viewLineCount < 0 || bodyRowCount <= viewLineCount){\r
 179                 // テーブルのカラー設定\r
 180                 m3_tableWithCololor(srcTable, true);\r
 181                 return;\r
 182         }\r
 183         \r
 184         // カラム数のエラーチェック\r
 185         if (srcTable.tHead.rows[0].cells.length != srcTable.tBodies[0].rows[0].cells.length){\r
 186                 alert('カラム数にエラーがあります\nヘッダカラム数=' + srcTable.tHead.rows[0].cells.length +\r
 187                          ',ボディカラム数=' + srcTable.tBodies[0].rows[0].cells.length);\r
 188                 return;\r
 189         }\r
 190         if (hasFoot){\r
 191                 if (srcTable.tFoot.rows[0].cells.length != srcTable.tBodies[0].rows[0].cells.length){\r
 192                         alert('カラム数にエラーがあります\nフッタカラム数=' + srcTable.tFoot.rows[0].cells.length +\r
 193                                  ',ボディカラム数=' + srcTable.tBodies[0].rows[0].cells.length);\r
 194                         return;\r
 195                 }\r
 196         }\r
 197         // カラムの幅をヘッダのカラム幅に合わせる\r
 198         for(var i = 0; i < srcTable.tHead.rows[0].cells.length; i++) {\r
 199                 srcTable.tHead.rows[0].cells[i].style.width = \r
 200                 srcTable.tBodies[0].rows[0].cells[i].style.width = \r
 201                         (srcTable.tHead.rows[0].cells[i].clientWidth - srcTable.cellPadding * 2)+ 'px';\r
 202                 if (hasFoot) srcTable.tFoot.rows[0].cells[i].style.width = srcTable.tHead.rows[0].cells[i].style.width;\r
 203         }\r
 204 \r
 205         // ヘッダ部、フッタ部の高さを退避\r
 206         var thHeight = srcTable.tHead.offsetHeight;\r
 207         if (hasFoot) var tfHeight = srcTable.tFoot.offsetHeight;\r
 208 \r
 209         srcTable.style.width = srcTable.offsetWidth + 'px';\r
 210         var tWidth = srcTable.offsetWidth;      // ヘッダ、フッタ、データ領域の幅\r
 211 \r
 212         // テーブルを複製、tbodyの中身を削除\r
 213         var destTableHead = srcTable.cloneNode(true);\r
 214         while (destTableHead.tBodies[0].rows.length) {\r
 215                 destTableHead.tBodies[0].deleteRow(0);\r
 216         }\r
 217 \r
 218         // 新規DIV - ヘッダ部用を作成\r
 219         var newDivHead = document.createElement('div');\r
 220         newDivHead.style.width = tWidth+'px';\r
 221         newDivHead.style.height = thHeight+'px';\r
 222         newDivHead.style.overflow = 'hidden';\r
 223         newDivHead.style.position = 'relative';\r
 224         destTableHead.style.position = 'absolute';\r
 225         destTableHead.style.left = '0';\r
 226         destTableHead.style.top = '0';\r
 227         newDivHead.appendChild(destTableHead);\r
 228         srcTable.parentNode.insertBefore(newDivHead, srcTable);\r
 229         \r
 230         // テーブルの複製を作成　ヘッダ部を削除\r
 231         var destTableBody = srcTable.cloneNode(true);\r
 232         destTableBody.deleteTHead();\r
 233         if (hasFoot) destTableBody.deleteTFoot();       // フッタ削除\r
 234 \r
 235         // 新規DIV - ボディ部用を作成\r
 236         var newDivBody = document.createElement('div');\r
 237         newDivBody.style.width = (tWidth+18)+'px';\r
 238         newDivBody.style.overflow = 'auto';\r
 239         newDivBody.appendChild(destTableBody);\r
 240         srcTable.parentNode.insertBefore(newDivBody, srcTable);\r
 241         \r
 242         // データ表示領域のサイズ設定\r
 243         var rowHeight = destTableBody.clientHeight / bodyRowCount;      // データ行の高さ\r
 244         tHeight = rowHeight * viewLineCount;\r
 245         newDivBody.style.height = tHeight + 'px';\r
 246         newDivBody.scrollTop = rowHeight * viewTopLineNo;               // 表示領域の先頭行を設定\r
 247 \r
 248         // 新規DIV - フッタ部用を作成\r
 249         if (hasFoot){\r
 250                 // テーブルの複製\r
 251                 var destTableFoot = srcTable.cloneNode(true);\r
 252                 while (destTableFoot.tHead.rows.length) {\r
 253                         destTableFoot.tHead.deleteRow(0);\r
 254                 }\r
 255                 while (destTableFoot.tBodies[0].rows.length) {\r
 256                         destTableFoot.tBodies[0].deleteRow(0);\r
 257                 }\r
 258                 \r
 259                 var newDivFoot = document.createElement('div');\r
 260                 newDivFoot.style.width = tWidth+'px';\r
 261                 newDivFoot.style.height = tfHeight+'px';\r
 262                 newDivFoot.style.overflow = 'hidden';\r
 263                 newDivFoot.style.position = 'relative';\r
 264                 destTableFoot.style.position = 'absolute';\r
 265                 destTableFoot.style.left = '0';\r
 266                 destTableFoot.style.top = '0';\r
 267                 newDivFoot.appendChild(destTableFoot);\r
 268                 srcTable.parentNode.insertBefore(newDivFoot, srcTable);\r
 269         }\r
 270         \r
 271         // 元テーブルを削除\r
 272         srcTable.parentNode.removeChild(srcTable);\r
 273         \r
 274         // テーブルのカラー設定\r
 275         m3_tableWithCololor(destTableBody, true);\r
 276 }\r
 277 /**\r
 278  * テーブル行のカラー設定\r
 279  *\r
 280  *  テーブル行の行ごとに色分け、カレント行の色分けのためのクラス設定を行う\r
 281  *\r
 282  * @param object  object                        テーブルオブジェクトまたはテーブルID文字列\r
 283  * @param bool    withMouse                     マウスに合わせて色を変えるかどうか\r
 284  * @return なし\r
 285  */\r
 286 function m3_tableWithCololor(object, withMouse)\r
 287 {\r
 288         var tableObj;           // テーブルオブジェクト\r
 289         \r
 290         if (typeof object == "string"){\r
 291                 tableObj = document.getElementById(object);\r
 292         } else {\r
 293                 tableObj = object;\r
 294         }\r
 295         // テーブル行のカラー設定\r
 296         $(tableObj).find('tbody tr:odd').addClass("even");\r
 297         \r
 298         // マウスオーバーイベントへの対応\r
 299         if (!withMouse) return;\r
 300         $(tableObj).find('tbody tr').mouseover(function(){\r
 301                 $(this).addClass("ruled");\r
 302         }).mouseout(function(){\r
 303                 $(this).removeClass("ruled");\r
 304         }).click(function(){\r
 305                 $(this).toggleClass("selected");\r
 306         });\r
 307 }\r