datatable用法

来源：互联网发布：网络课程培训心得编辑：程序博客网时间：2024/05/16 23:43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsm_arp_static</title>
<link rel="stylesheet" href="lib/css/login.css">
<link rel="stylesheet" href="lib/css/same_type.css" />
<link rel="stylesheet" href="lib/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="lib/css/select.dataTables.css">
<link rel="stylesheet" href="lib/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="lib/css/bootstrap.min.css">
<script language="javascript" src="lib/js/jquery-1.11.3.js"></script>
<script language="javascript" src="lib/js/web_common.js"></script>
<script language="javascript" src="lib/js/jquery.dataTables.min.js"></script>
<script language="javascript" src="lib/js/dataTables.buttons.min.js"></script>
<script language="javascript" src="lib/js/dataTables.select.min.js"></script>
<script language="javascript" src="lib/js/jquery.datatable.editor2.js"></script>
<script language="javascript" src="lib/js/bootstrap.min.js"></script>
<script language="javascript" src="lib/js/bootbox.min.js"></script>
<script language="javascript" src="lib/js/jquery.validate.min.js"></script>
<script language="javascript" src="lib/js/messages_zh.js"></script>
<script language="javascript" src="lib/js/additional-methods.js "></script>
<script language="javascript">
$(document).ready(function() {
var pd = new PageData([
{id:'arplist', url:"getArpBindTable.json",data:{"arpCfg":"1"}},
{id:'enable', url:"setArpBindTable.cmd",data:{"action":"change"},form:'#arpEnable',on:'click:#saveARP',refresh:true}
]);
var g_table;
var g_editor;

g_table = $('#tbl_prjlst').DataTable( {
dom: "lBfrtip", //功能按键位置
// order: [ 1, 'desc' ],
idSrc: 'index',
ajax: "getArpBindTable.json",
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false,
width:"5px"
},
{ data: "index",width:"40px",
className:'textCenter'
},
{
data: "ipStr",
width:"70px"
},
{ data: "macStr",width:"70",className:'textCenter'},
{ data: "enableBind",width:"*",className:'textCenter'}
],
//国际语言转化
oLanguage: {sUrl: "lib/xml/chinese.js"},
//单选框
select: {style: 'os',selector: 'tr'},
buttons: [],
rowCallback:function(row,data,index){
if ( data.enableBind == 0 ) {
$(row).find("td:last").html("失效");
}else if(data.enableBind == 1){
$(row).find("td:last").html("生效");
}
}
} );
$("table").on( 'click', 'tbody tr:not(.group)', function () {
if( $(this).hasClass('selected')){
$(".disEdit").attr("disabled",true).addClass("gray");
}else{
$(".disEdit").attr("disabled",false).removeClass("gray");
}
});
//选择多行
//$('#tbl_prjlst tbody').on( 'click', 'tr', function () {
// $(this).toggleClass('selected');
// } );
// $("table").on( 'click', 'tbody tr:not(.group)', function () {

//edit
g_editor = new $.fn.dataTable.Editor( {
ajax: {url:"setArpBindTable.cmd"},
table: "#tbl_prjlst",
idSrc: 'index', //标识符,用于告诉编辑器从data属性读取唯一的行值id
// 编辑模态框
validate:function(id)
{
return $(id).validate();
},
fields: [
{
label: "IP地址:",
name: "ipStr",
validateRule:' required="true" ip="true"'
},
{
label: "MAC地址:",
name: "macStr",
validateRule:' required="true" mac="true" '
},
// {
// label: "MAC地址:",
// type: "select",
// //data:'getArpTable.json',
// def:1,
// name: "index",
// validateRule:' required="true"',
// },
{
label: "绑定:",
type: "checkbox",
def:1,
name: "enableBind"
}
]
} );

g_editor.on('submitSuccess', function(e, retObj, newData) {

//retObj.errText = "xxxx";
if (retObj.ret == 0 || retObj.ret == "0")
{
window.parent.bootbox.alert($L("setSuccess"));
g_table.ajax.reload();
}
else
{
window.parent.bootbox.alert($L("setError"));
}

});

g_editor.on('submitError', function() {
window.parent.bootbox.alert($L("setError"));
});

} );
</script>
<style>
.editDiv{
height:100%;
}
.row table tr td:first-child{width:20px;}
#tbl_prjlst_wrapper{width:560px;margin-left:-30px!important}
</style>

</head>
<body>
<div class="mainbox" style="width:660px;height: 100%" id="arpSetupBox">
<div class="Loginbox" style="width:660px;height: 100%">
<div class="title"><p class="titleText"><span class="ln-sarpbindset">静态ARP绑定设置</span></p></div>
</div>
<div class="LoginboxText" style="width:660px;height: 100%;">
<div class="contentbox" style="width:660px;height: 100%;">
<div class="ln-arptip1">本页面设置局域网内计算机和广域网网关的MAC地址和IP地址的对应项，防范APR病毒伪造本地计算机或者广域网网关欺骗路由器。</div>
<div class="ln-arptip2" style="padding:5px 0;"></div>
<div class="ln-arptip3"></div>
<div class="bindARP" style="height:100px;">
<form id="arpEnable">
<div class="setup">
<div style="float: left;" class="ln-arpbind">ARP绑定:</div>
<div class="bindARPinput">
<input type="radio" name="enable" value="0" dv='arplist.arpCfg.enable'/><label class="ln-enableIf[0]">关闭</label>
</div>
<div class="bindARPinput">
<input type="radio" name="enable" value="1" dv='arplist.arpCfg.enable'/><label class="ln-enableIf[1]">启用</label>
</div>
<div class="bindARPinput">
<input type="button" class="ln-save saveBtn" value="保存" id="saveARP"/>
</div>
</div>
<p id="ln-arptip4" style="color: red;">只有ARP绑定的总开关为启用状态时，后续的“ARP绑定条目”才能够生效；反之，则失效。</p>
</form>
</div>
<div class="contentbox" style="width:560px;height:100%">
<div class="row" style="height:100%;margin-top:20px;" dv-if="arplist.arpCfg.enable == '1'">
<table id="tbl_prjlst" toolbar=".rd_rq_toolbar" style="width:660px;">
<thead>
<tr>
<th class="hidSec"></th>
<th class="ln-index">索引</th>
<th class='ln-ipaddr'>IP地址</th>
<th class='ln-macaddr'>MAC地址</th>
<th class='ln-bind'>绑定</th>
</tr>
</thead>
</table>
</div>
</div>

<div id="rd_rq_toolbar" class="rd_rq_toolbar hidden">
<button type="button" action="create" class="dt-editor-event text-success editeBtn">
<span class="glyphicon" action="create"></span>创建
</button>

<button type="button" action="edit" class="dt-editor-event text-info editeBtn disEdit gray" disabled>
<span class="glyphicon" action="edit"></span>编辑
</button>

<button type="button" action="remove" class="dt-editor-event text-danger disEdit editeBtn gray" disabled>
<span class="glyphicon" action="remove"></span>删除
</button>
</div>
</div>

</div>
<div class="OrangeLink">
<input class="buttonX ln-help" type="button" value="帮助" id = "help" onclick="$('.blackbox').show();$('.signwin').show();">
</div>
</body>
</html>

阅读全文

0 0