jQuery獲取radio選中項的值實例
639
2024-02-27
首先介紹下這兩個插件功能
1.DataTables是一個jQuery的表格插件。
官方網站及其下載地址：http:/www.datatables.net
其主要特點如下：
1.自動分頁處理
2.即時表格數據過濾
3.數據排序以及數據類型自動檢測
4.自動處理列寬度
5.可通過CSS定制樣式
6.支持隱藏列
7.易用
8.可擴展性和靈活性
9.國際化
10.動態創建表格
11.免費的
2.對話框（dialog），是jQuery UI 非常重要的一個功能。它徹底的代替了JavaScript的alert()、prompt()等方法，也避免了新窗口或頁面的繁雜冗余。
我這里直接講下我需要實現什么樣的功能，大家就知道了
對，就是一個非常簡單的刪除功能，然后彈出對話框，然后點擊確定，執行刪除。
首先來看下dataTables里面的寫法
$('#table').dataTable({
"sDom": "t" +
"<'soc-pagenagtion' ip>",
oLanguage: {
"sProcessing": "處理中...",
"sLengthMenu": "顯示 _MENU_ 項結果",
"sZeroRecords": "沒有匹配結果",
"sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
"sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
"sInfoFiltered": "(由 _MAX_ 項結果過濾)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中數據為空",
"sLoadingRecords": "載入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上頁",
"sNext": "下頁",
"sLast": "末頁"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"autoWidth": false,
"processing": true,
"serverSide": true,
"searching": false,
ordering: false,
"info": true,
ajax: function (param, callback, settings) {
var service = $("#service").val();
var params = {
//參數集合
}
$.ajax({
type: "GET",
url: "",
dataType: "json",
data: params,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function (d) {
if(d!==null){
callback({
//返回的查詢結果
recordsTotal: d.pageUtil.total,
recordsFiltered: d.pageUtil.total,
data: d.pageUtil.list
});
}
}
});
},
"columns": [
{"data": "code"},
{"data": "name"},
//表格所對應的字段
],
"columnDefs": [
{
"render": function (data, type, row) {
//這里是替換顯示 比如查詢結果為1 你可以顯示其他的值
if (row.o_status == '0') {
return [
row.o_status = '停用'
].join('');
} else if (row.o_status == '1') {
return [
row.o_status = '啟用'
].join('');
} else {
return [
row.o_status = ''
].join('');
}
},
"targets": 6
},
{
//這一步是追加刪除鏈接
"render": function (data, type, row) {
return [
"<a id='dialog_link'>刪除</a>"
].join('');
},
"targets": 8
}
]
});
接著就是寫dailog的配置跟樣式
html代碼
<div id="dialog-message" title="提示"> <p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 是否刪除該條數據？ </p> </div>
js代碼
// jquery-ui 對話框設置
$( "#dialog-message" ).dialog({
autoOpen : false,
width : 400,
resizable : false,
modal : true,
title:"",
buttons: [{
html : "確認",
"class" : "btn btn_b",
click : function() {
var code= window.parent.$("#dialog-message").data("code");//這里是獲取傳入的參數值
location.href="http://www.gimoo.net/t/1812/;
$(this).dialog("close");
}
}, {
html : "取消",
"class" : "btn btn_o",
click : function() {
$(this).dialog("close");
}
}]
});
接著怎么就是傳參數進入對話框
首先定義點擊事件彈出對話框
/**
* 彈出對話框并傳遞參數
*/
$('#table tbody').on( 'click', '#dialog_link', function () {
var table = $('#table').DataTable();
var data = table.row( $(this).parents('tr') ).data();//這里是獲取當前你點擊的那行的數據
$('#dialog-message').data("code", data.code).dialog('open');//然后傳入對話框，打開對話框
return false;
});
我之前一直用
$("#dialog_link").click(function(){
});
不知道為什么一直打不開對話框
注意對話框設置一定要放到上面這個代碼的上面
以上所述是小編給大家介紹的jQuery dataTables與jQuery UI 對話框dialog的使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對綠夏網網站的支持！
