English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
本例では、Jquery EasyUIの簡易操作をパッケージ化して、皆様の参考に提供しました。具体的な内容は以下の通りです
//確認
function Confirm(msg, control) {
$.messager.confirm('確認', msg, function (r) {
if (r) {
eval(control.toString().slice(11));
}
});
return false;
}
//load
function Load() {
$("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
$("<div class=\"datagrid-$(".datagrid mask").remove();-msg\"></div>").html("動作中、少々お待ちください。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
}
//, top: ($(window).height()}
})
function dispalyLoad() {-表示ロード
function dispalyLoad() {-$(".datagrid mask").remove();-マスク
}
//msg).remove();
ポップアップ通知ダイアログalert
function showMsg(title, msg, isAlert) {
if (isAlert !== undefined && isAlert) {
} else {
$.messager.alert(title, msg);
タイトル: title,
$.messager.show({
メッセージ: msg,
});
}
}
//showType: 'show',
削除確認confirm
function deleteConfirm() {63;');
}
//ポップアップ確認ダイアログconfirm
function showConfirm(title, msg, callback) {
$.messager.confirm(title, msg, function (r) {
if (r) {
if (jQuery.isFunction(callback))
callback.call();
}
});
}
//プロセスバー
function showProcess(isShow, title, msg) {
if (!isShow) {
$.messager.progress('close');
return;
}
var win = $.messager.progress({
タイトル: title,
メッセージ: msg,
});
}
//ポップアップウィンドウ
function showMyWindow(title, href, width, height, modal, minimizable, maximizable) {
$('#myWindow').window({
タイトル: title,
幅: width === undefined &63; 600 : 幅
高さ: height === undefined &63; 400 : 高さ
content: '<iframe scrolling="yes" frameborder="0" src="' + href + " style="width:100%;height:98%;></iframe>',
// href: href === undefined ? null : href,
modal: modal === undefined ? true : modal,
minimizable: minimizable === undefined ? false : minimizable,
maximizable: maximizable === undefined ? false : maximizable,
shadow: false,
cache: false,
closed: false,
collapsible: false,
resizable: false,
loadingMessage: 'データをロードしています、少々お待ちください......'
});
}
//弹出框体 windowを閉じる
function closeMyWindow() {
$('#myWindow').window('close');
}
/**
*指定されたフォームの内容をクリアします。引数はターゲットフォームのIDです
*注：Jquery EasyUIのポップアップウィンドウで新しい内容を入力する際には、次に開くたびに前回の入力履歴をクリアする必要があります。
*データをクリアする方法は、各入力コンポーネントに対して空値を設定する方法が一般的です：$("#name").val(""),この方法で、
*入力コンポーネントが多い場合、非常に複雑になり、生成されるjsコードが長くなります。この場合、すべての入力コンポーネントをformフォームにまとめることができます。
*中で、以下のメソッドを呼び出してください。
*
*@param formId 空にするformフォームのID
*/
function resetContent(formId) {
var clearForm = document.getElementById(formId);
if (null != clearForm && typeof (clearForm) != "undefined") {
clearForm.reset();
}
}
/**
*DataGridリストの更新（Jquery Easy UiのdataGridに適用）
*注：この方法を使用してDataGridリストデータ（データの再読み込みも意味します）を更新することをお勧めします。直接の文を使用することは推奨しません。
*$('#dataTableId').datagrid('reload');を使用してリストデータをリフレッシュします。なぜなら、後者を使用する場合、将来的
*プロジェクトを修正する際に、システム内のすべてのリフレッシュ箇所で他の操作を行う必要がある場合、システム内のすべてのリフレッシュに関連する
*のコード、この作業は非常に大変で、ミスしやすいですが、この方法を使用してリストをリフレッシュすると、このような修正
*この要件は簡単に実現できます。また、エラーが発生することはありません
*
*@paramdataTableIdリフレッシュするデータのDataGridに依存するtableリストID
*/
function flashTable(dataTableId) {
$('#' + dataTableId).datagrid('reload');
}
/**
*DataGridの行選択を解除します（Jquery Easy UiのdataGridに適用）
*注意："全選択checkbox"の選択を解除することができましたが、前提条件として、リストを表示する必要があります
*データのDataGridに依存するTableをhtmlドキュメントの最も全面に配置します。少なくとも、このtableの前には
*他のcheckboxコンポーネント。
*
*@paramdataTableId解除するデータレコードの目標tableリストID
*/
function clearSelect(dataTableId) {
$('#' + dataTableId).datagrid('clearSelections');
//DataGridの全選択を解除します
$("input[type='checkbox']").eq(0).attr("checked", false);
}
/**
*Jquery EasyUiのポップアップウィンドウを閉じます（Jquery Easy Uiに適用）
*
*@paramdialogId閉じるウィンドウのID
*/
function closeDialog(dialogId) {
$('#' + dialogId).dialog('close');
}
/**
*自适应テーブルの幅処理（Jquery Easy UiのdataGridの列幅に適用）,
*注：リストの各列の幅がブラウザの幅の変更に応じて変更できるようにします。これにより、DataGridの幅を設定します
*の列幅は、異なる解像度のブラウザで自動的に伸縮し、異なる解像度のブラウザの要件を満たすことができます
*使用方法：(如:{field:'ymName',title:'番号',width:fillsize(0.0}8),align:'center'},)
*
*@param percent 当前行の幅がウィンドウの全体幅に占めるパーセンテージ（小数形式で表現します、例：0.)3を表します30%)
*
*@return 現在のウィンドウと対応するパーセンテージで計算された具体的な幅
*/
function fillsize(percent) {
var bodyWidth = document.body.clientWidth;
return (bodyWidth - 90) * percent;
}
/**
* 選択されたレコード行を取得します（単一選択）
*
* @param dataTableId 目的のDataGridリストのtableのid
* @param errorMessage 一行も選択されなかった場合のアラート情報
*
* @return 選択されたレコード行のオブジェクト、nullまたは"null"（ブラウザがnullを文字列"null"に変換することがある場合）が返された場合、選択されなかったことを意味します
*一行のレコードを選択します。
*/
function getSingleSelectRow(dataTableId, errorMessage) {
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
if (num == 1) {
return rows[0];
} else {
$.messager.alert('提示メッセージ', errorMessage, 'info');
return null;
}
}
/**
* DataGridから選択されたレコードのidを取得します、複数のidはカンマで区切ります
* 注：このメソッドを使用する前提条件は、DataGridのidField属性がリストJsonデータのフィールド名に対応している必要があります。
* @param dataTableId 目的のDataGridリストのtableのid
*
* @return 選択されたレコードのid文字列（複数のidはカンマで区切ります）
*/
function getSelectIds(dataTableId, noOneSelectMessage) {
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
var ids = null;
num < 1) {
if (null != noOneSelectMessage) $.messager.alert('提示メッセージ', noOneSelectMessage, 'info');
return null;
} else {
for (var i = 0; i < num; i++) {
null == ids || i == 0;
ids = rows[i].id;
} else {
ids = ids + "," + rows[i].id;
}
}
return ids;
}
}
/**
*選択されたレコードを削除します（Jquery Easy UiのdataGridに適用できます）（削除の基準はidです）
*注：このメソッドは、選択されたレコードのid（DataGridのidField属性がリストJsonデータのフィールド名に対応している必要があります）を自動的に変換します。
*動的に文字列を組み立て、複数のidはカンマで区切ります（例：）1,2,3,8,10)，それを変数idsに格納してバックエンドに渡します。
*このパラメータ名を使用して、requestオブジェクトからすべてのid値文字列を取得することができます。この場合、sqlまたはhql文を構築する際に、inを使用することができます。
*キーワードで処理を行い、簡単に説明することができます。
*また、バックエンドコードは操作が完了した後、ajax形式でJson形式の提示情報を返さなければなりません。提示のJson形式の情報には、以下の
*messageフィールドは、今回の削除操作の成功と失敗などのユーザーへの操作情報を保存します。
*
*@paramdataTableId 削除するレコードが含まれるリストテーブルのID
*@paramrequestURL バックエンドサーバーとの通信を行う、具体的な削除操作のリクエストパス
*@paramconfirmMessage 削除確認情報
*/
function deleteNoteById(dataTableId, requestURL, confirmMessage) {
null == confirmMessage || typeof (confirmMessage) == "undefined" || "" == confirmMessage;
confirmMessage = "選択したレコードを削除するか確認します?";
}
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
var ids = null;
num < 1) {
$.messager.alert('提示メッセージ', '選択したレコードを削除します!', 'info');
} else {
$.messager.confirm('確認', confirmMessage, function (r) {
if (r) {
for (var i = 0; i < num; i++) {
null == ids || i == 0;
ids = rows[i].id;
} else {
ids = ids + "," + rows[i].id;
}
}
$.getJSON(requestURL, { "ids": ids }, function (data) {
null != data && null != data.message && "" != data.message;
$.messager.alert('提示メッセージ', data.message, 'info');
flashTable(dataTableId);
} else {
$.messager.alert('通知メッセージ', '削除に失敗しました！', 'warning');
}
clearSelect(dataTableId);
});
}
});
}
}
$(function(){
/*************************直接呼び出せる確認メソッド***************************/
/*
notNull('age','年齢を入力してください');
reapet('password','repassword','入力が一致しません');
number('age','数字でなければなりません');
cellPhone('phone','携帯電話番号フォーマットが不正です');
phone('phone','電話番号フォーマットが不正です');
email('email','メールフォーマットが不正です');
unique('username','unique.html','name');
form('form','user_regist.html');
*/
//空ではない機能
notNull = function(id, msg){
$('#'+id).validatebox({
required: true,
missingMessage: msg
});
}
//重複機能
reapet = function(id, re_id, msg){
id = '#'+id;
$('#'+re_id).validatebox({
validType: "reapet['"+id+"','"+msg+"']"
});
};
//数字
number = function(id, msg){
$('#'+id).validatebox({
validType: 'number["'+msg+'"]'
});
};
//携帯電話番号
cellPhone = function(id, msg){
$('#'+id).validatebox({
validType: 'cellPhone["'+msg+'"]'
});
};
//電話番号
phone = function(id, msg){
$('#'+id).validatebox({
validType: 'phone["'+msg+'"]'
});
};
//メール
email = function(id,msg){
$('#'+id).validatebox({
validType: 'email',
invalidMessage: msg
});
};
//url
url = function(id, msg){
$('#'+id).validatebox({
validType: 'url',
invalidMessage: msg
});
};
//ip
ip = function(id, msg){
$('#'+id).validatebox({
validType: 'ip["'+msg+'"]'
});
};
/**
* バックエンドに提交してユニーク性の確認を行います
* @param id: 元素のIDを確認、url: 提交先のURL、paramName: 传入される値のパラメータ名
*/
unique = function(id, url, paramName){
$('#'+id).validatebox({
validType: 'unique["'+url+'","'+id+'","'+paramName+'"]'
});
};
//データが無効の場合に提出を阻止する
form = function(id, url){
$("#"+id).form({
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(data){
alert(data);
}
});
};
/*************************空の検証 required="true"********************************/
//HTMLタグにrequired="true"を追加することで、空の検証を実行できます
$("*").each(function(){
if($(this).attr('required')){
$(this).validatebox({
required: true,
missingMessage: '空にできません'
});
}
});
//strutsタグを使用する場合、属性required="true"を追加することで、以下のコードを使用して空の検証を実行できます
//注意：strutsタグはlabelを使用する必要があります
$('span').each(function(){
//すべてのspanタグを巡回して、class="required"が設定されているかを検証します
if($(this).attr('class')=='required'){
$("#"+$(this).parent().attr('for')).validatebox({
required: true,
missingMessage: '空にできません'
});
}
});
/*************************カスタムメソッド********************************/
/**
*カスタムの検証メソッド（2つのパスワードが同じかどうかを検証）
* @param paramは最初に渡されたパスワードボックスのIDです
* @call repeat['#id']
*/
$.extend($.fn.validatebox.defaults.rules,{
reapet: {
validator: function(value, param){
var pwd = $(param[0]).attr('value');
if(pwd != value){
return false;
}
return true;
},
message: '{1}
}
});
//正規表現を使用して数字の検証を行います
$.extend($.fn.validatebox.defaults.rules, {
number: {
validator: function(value, param){
return /^-?(?:/d+|/d{1,3}63;:,/d{3)+)(?:/./d+)?$;/.test(value);
},
message: '{0}'
}
});
//電話番号
$.extend($.fn.validatebox.defaults.rules,{
cellPhone: {
validator: function(value, param){
return /^0{0,1}(134-9]|157-9]|15[0-2]|187-8]-9]{8}$/.test(value);
},
message: '{0}'
}
});
/**
* 電話番号
* 一致する形式：11携帯電話番号
* 3-4地域番号7-8ライブ番号1－4役割番号
* 例：12345678901、1234-12345678-1234
*/
$.extend($.fn.validatebox.defaults.rules,{
phone: {
validator: function(value, param){
return /(/d{11})|^((/d{7,8})|(/d{4}|/d{3)-(/d{7,8})|(/d{4}|/d{3)-(/d{7,8)-(/d{4}|/d{3}|/d{2}|/d{1})|(/d{7,8)-(/d{4}|/d{3}|/d{2}|/d{1))$/.test(value);
},
message: '{0}'
}
});
//ip検証
$.extend($.fn.validatebox.defaults.rules,{
ip: {
validator: function(value, param){
return /^((2[0-4]/d|25[0-5]|[01]&63;/d/d&63;)/.){3}(2[0-4]/d|25[0-5]|[01]&63;/d/d&63;)$/.test(value);
},
message: '{0}'
}
});
//ユニークな検証
$.extend($.fn.validatebox.defaults.rules,{
unique: {
validator: function(value, param){
value = $('#'+param[1]).attr('value');
$('#'+param[1]).load(param[0]+"&#"63);"+param[2]+"=="+value,
function(responseText, textStatus, XMLHttpRequest){
if(responseText) //バックエンドがtrueまたはfalseを返します
return true;
});
return false;
},
message: 'ユーザー名が既に存在しています'
}
});
});
これで本記事は終わりです。皆様の学習に役立つことを願っています。また、ナイアラチュートリアルを多くのご支援を賜りますようお願い申し上げます。
声明：本記事の内容はインターネットから提供されています。著作権者はそれぞれであり、インターネットユーザーによって自発的に提供されたコンテンツです。本サイトは権利を所有しておらず、人工的に編集されていないため、関連する法的責任を負いません。著作権侵害の可能性のある内容を見つけた場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールの際には、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認されると、本サイトは侵害される可能性のある内容をすぐに削除します。）