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

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

WBOYオリジナル: 2016-05-16 16:15:041324ブラウズ

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

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

    <スクリプトタイプ="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 '

'
} 「写真がありません」を返す
}} },
{ フィールド: 'フラグ'、タイトル: 'ステータス'、幅: 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">

































                <%-- --%>

            保存                 onclick="javascript:$('#dlg').dialog('close')">取消

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：現在の time_javascript スキルを動的にロードする JS メソッド次の記事：現在の time_javascript スキルを動的にロードする JS メソッド

続きを見る

商品名：		商品種類：
商品価格：		商品折扣：
库存数：		卖出ブロック：
状態态：	上架下架	否か热销：	通常热销
秒杀状態态：	正常秒杀	至
产品照片：	MaxLength="255"> 正在上传，请稍候...
描説明：	runat="サーバー">

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

関連記事