ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryの動的追加と削除(tr/td)_javascriptスキル

jqueryの動的追加と削除(tr/td)_javascriptスキル

WBOY
リリース: 2016-05-16 16:15:04
オリジナル
1324 人が閲覧しました

コードは非常にシンプルで、実装されている機能も非常にシンプルなので、必要な方は参照してください。

コードをコピー コードは次のとおりです:


   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
    <スクリプトタイプ="text/javascript">
        /* jquery easyui 操作*/
        window.onload = function () {
            InitGird();
        }
        //加下编辑器
        var エディタ;
        $(関数() {
            editor = KindEditor.create('textarea[name="説明"]', {
                サイズ変更タイプ: 1、
                UploadJson: '../ashx/upload_ajax.ashx?action=EditorFile&IsWater=1',
                fileManagerJson: '../ashx/upload_ajax.ashx?action=ManagerFile',
                allowedFileManager: true
            });
        });
        //初期化上传制御件
        $(関数() {
            InitSWFUpload("../ashx/upload_ajax.ashx", "ファイルデータ", "1024 KB", "../../script/swfupload/swfupload.swf", 1, 1);
        });
        //搜索
        関数 Search() {
            $('#dgCaseInfo').datagrid('load', {
                アクション: "loadListPage",
                名前: $("#Names").val()
            });
        }
        //初期化表格
関数 InitGird() {
$("#dgCaseInfo").datagrid({
autoRowHeight: false,
loadMsg: '読み込み中...',
url: '../ashx/GetSm_CaseInformation.ashx?types=loadListPage', //データをリクエストするページ
sortName: 'ID', //ソートフィールド
idField: 'ID', //識別フィールド、主キー
iconCls: '', //タイトルの左側の画像
singleSelect: true、
width: '100%', //Width
高さ : 'auto', //高さ
nowrap: true, // 行を折り返すかどうか、True はデータを 1 行で表示します
Striped: true, //True は奇数行と偶数行に異なる背景色を使用します
collapsible: false, //Collapsible
sortOrder: 'desc', //ソートタイプ
RemoteSort: true, //サーバーからのデータを並べ替えるかどうかを定義します
適合: true、
singleSelect: true, // 1 行のみ選択できるかどうか
selectoncheck:false、//チェックボックスをクリックすると行が選択されません
fitColumns: true, //列は自動的にスケールされます
列: [[
{ フィールド: '名前'、タイトル: '商品名'、幅: 200、整列: '左' },
{ フィールド: 'Add_Time'、タイトル: '時間を追加'、幅: 100、位置: 'left' },
{ フィールド: '説明'、タイトル: '説明'、幅: 100、配置: '左'、非表示: true },
{ フィールド: 'ファイルパス'、タイトル: '症例写真'、幅: 100、配置: '左'、
フォーマッタ: 関数 (値、行、インデックス) {
If (row.FilePath != "") {
return 'Photo'
} 「写真がありません」を返す
}} },
{ フィールド: 'フラグ'、タイトル: 'ステータス'、幅: 100、整列: '左'、
フォーマッタ: 関数 (値、行、インデックス) {
If (row.Flag == 0) {
「棚にある」を返します
} 「削除済み」を返します
} } },
{ フィールド: 'TypeID'、タイトル: '製品タイプ'、幅: 100、整列: '左'、非表示: true },
{ フィールド: 'MonadID'、タイトル: '会社名'、幅: 100、整列: '左'、非表示: true },
{ フィールド: 'MonadName'、タイトル: '会社名'、幅: 100、整列: '左'、非表示: true }
]]、
ツールバー: "#toolbar",
queryParams: { "アクション": "クエリ" },
ページネーション:true、//ページングを有効にするかどうか pagePosition: 'bottom', //ページ位置
pageNumber: 1, //デフォルトのインデックスページ
pageSize: 10, //ページ上のデフォルトのデータ項目数
onDblClickRow: function (rowIndex, rowData) {//行ダブルクリック イベント
Edit();
}
})
}
var url;
// データを追加します
function Add() {
$("#tdLeft").remove();//フラッシュセール時間tdを削除
$("#tdSeckill").remove(); //フラッシュセール時刻を削除 td
loadTypeID();
editor.html("");
$('#dlg').dialog('open').dialog('setTitle', 'Add');
$('#form1').form('clear');
url = '../ashx/GetSm_CaseInformation.ashx?types=ListAdd';
$("input[name='Flag']").eq(0).attr('checked', 'true');
}
//編集と変更
function Edit() {
$("#tdLeft").remove(); //フラッシュセール時間 td
を削除 $("#tdSeckill").remove(); //フラッシュセール時刻を削除 td
loadTypeID();
url = '../ashx/GetSm_CaseInformation.ashx?types=ListEdit';
var row = $('#dgCaseInfo').datagrid('getSelected');
if (行) {
$('#dlg').dialog('open').dialog('setTitle', 'Modify');
$("#imageCaseUrl").attr("src", "../.." $('#FilePath').val()); // の URL を設定します。
editor.html(row["説明"]);
If (row["IsSeckill"]==1)//製品がフラッシュ セール ステータスにある場合:
{
$("#trSeckill").append(' Seckill 時間: to')
// easyui 日付コントロールを初期化します
$('#SeckillDateBegin').datetimebox({
必須: true、
showSeconds: false
});
$('#SeckillDateEnd').datetimebox({
必須: true、
showSeconds: false
});
}
$('#form1').form('load', row);
$("#Flag ").val(row["Flag"]); //ステータス値を設定します
}
}
//データを保存
関数 Save() {
editor.sync();
$('#form1').form('submit', {
url: url,
onSubmit: function () {
                    return $(this).form('validate');
                }、
                成功: 関数 (結果) {
                    if (結果                         $.messager.show({
                            タイトル: 'エラー'、
                            メッセージ: result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // ダイアログを閉じます
                        $('#dgCaseInfo').datagrid('reload');    // ユーザーデータをリロードします
                    }
                }
            });
        }
        //删除一条データベース
        関数 destroy() {
            var row = $('#dgCaseInfo').datagrid('getSelected');
            if (行) {
                $.messager.confirm('消息提示', '确定要删除吗?', function (r) {
                    if (r) {
                        $.post('../ashx/GetSm_CaseInformation.ashx?types=ListDel',
                                { id: row.ID },
                                    関数 (結果) {
                                        if (結果 > 0) {
                                            $('#dgCaseInfo').datagrid('reload');    // ユーザーデータをリロードします
                                        } else {
                                            $.messager.show(
                                        { // エラー メッセージを表示
                                                                                                                                                                                                                                                                                               ​                                                                                                                                                                                                                                                                                                                                                      }
});
}
}
//製品タイプを読み込みます
関数loadTypeID() {
$('#TypeID').combobox({
URL: '../ashx/GetSm_CaseInformation.ashx?types=TypeIDLoad',
valueField: 'ID',
textField: 'DtyName'
});
}
// 画像をクリック後、を励起します function ShowBigview(rowIndex) {
var row = $("#dgCaseInfo").datagrid('getRows')[rowIndex];
If (row["FilePath"].toString() != "") {
$.messager.alert('大きな画像プレビュー', '') ;
} else {
$ .Messager.alert ('メッセージプロンプト', 'タイトル画像が設定されていません!'); }
}
// 通常起動するにはラジオボタンをクリックしてください
function DisDate() {
$("#tdLeft").remove(); //フラッシュセール時間 td
を削除 $("#tdSeckill").remove(); //フラッシュセール時刻を削除 td
}
//ラジオボタンをクリックしてフラッシュセールをトリガーします
関数 HideDate() {
$("#tdLeft").remove(); //フラッシュセール時間 td
を削除 $("#tdSeckill").remove(); //フラッシュセール時刻を削除 td
            $("#trSeckill").append(' 秒杀时间:')
            //初始化easyui日期控件
            $('#SeckillDateBegin').datetimebox({
                required: true,
                showSeconds: false
            });
            $('#SeckillDateEnd').datetimebox({
                required: true,
                showSeconds: false
            }); 
        }
   


   
   

   
   
closed="true" buttons="#dlg-buttons">
       

            产品信息

       

                    セル間隔="1">
           
               
                   
                   
               
           

           
               
               
               
               
           
           
               
               
               
               
           
           
               
               
               
               
           
           
               
               
               
               
           
           
               
               
                <%-- --%>
           
           
               
               
           
           
               
               
           
       
       
   
   

以上が本書のすべての内容です。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート

                    商品名:
               

                   
               

                    商品種類:
               

                   
               

                    商品価格:
               

                   
               

                    商品折扣:
               

                   
               

                    库存数:
               

                   
               

                    卖出ブロック:
               

                   
               

                    状態 态:
               

                    上架   
                    下架
               

                   否か热销:
               

                    通常   
                    热销
               

                    秒杀状態态:
               

                    正常   
                    秒杀
               

                 
               至
               

                    产品照片:
               

                   

                        MaxLength="255">
                       
                           

                        正在上传,请稍候...
                   

               

                    描 説明: