ホームページ > 記事 > ウェブフロントエンド > jqueryの動的追加と削除(tr/td)_javascriptスキル
jqueryの動的追加と削除(tr/td)_javascriptスキル
- WBOYオリジナル
- 2016-05-16 16:15:041259ブラウズ
コードは非常にシンプルで、実装されている機能も非常にシンプルなので、必要な方は参照してください。
コードをコピー コードは次のとおりです:
<スクリプトタイプ="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()); //
editor.html(row["説明"]);
If (row["IsSeckill"]==1)//製品がフラッシュ セール ステータスにある場合:
{
$("#trSeckill").append('
// 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
});
}
onclick="Add()">添加 plain="true" onclick="Edit()">编辑 iconcls="icon-remove" plain="true" onclick="destroy()">删除
产品名称：
data-options="iconCls:'icon-search'">搜索
closed="true" buttons="#dlg-buttons">
产品信息
以上が本書のすべての内容です。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。