EasyUI的DataGrid特殊字段的实现

来源：互联网发布：扫号器数据从哪弄编辑：程序博客网时间：2024/05/21 22:29

html部分：

</div>

javascript部分：

//显示表格
$('#dg').datagrid({
url:null,
fitColumns:true,
remoteSort:false,

sortName:'container_name',

sortOrder:'asc',
columns:[[
{field:'container_name',title:'容器名',width:120,rowspan:1,align:'left',sortable:true}, //字段可以支持排序和默认排序
{field:'container_desc',title:'容器描述',width:140,rowspan:1,align:'left'},
{field:'manager_url',title:'URL',width:350,rowspan:1,align:'left'},
{field:'username',title:'用户名',width:100,rowspan:1,align:'left'},
{field:'password',title:'密码',width:110,rowspan:1,align:'left'},
{field:'anyoperator',title:'操作',width:80,rowspan:1,align:'left',
formatter:function(val,row,index){
return '<a href="#" class="lmcurl" onclick="editContainer('+index+')">修改</a> | <a href="#" class="lmcurl" onclick="delContainer('+index+')">删除</a>';
}},
{field:'container_id',title:'ID',width:2,rowspan:1,align:'left',hidden:"true"}
]]
}).datagrid('loadData',dataObject);

红色部分是关键，我们就拿delContainer这个函数来说

function delContainer(index){
$('#dg').datagrid('selectRow',index);// 这里的index和红色的index就是表格中行的索引，很重要
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('确认','您确认要删除这个容器吗？',function(r){
if (r){
//删除container_id
$.post("container/delContainer",{
dml_type :"delete",
uuid : row.container_id
},function(data,textStatus){
//删除表格中的数据
$('#dg').datagrid('deleteRow',index);
}
);
}//end if
});//end confirm
}//end if
}//end function

editContainer同理：

function editContainer(index){
//如果要显示图片，可以：return '<img src="your_img.jpg" onclick="editUser('+index+')" />';

//选择前先取消遗留的选择项,否则连续修改两条记录就会出bug

$('#dg').datagrid('unselectAll');
$('#dg').datagrid('selectRow',index);// 关键在这里
var rowData = $('#dg').datagrid('getSelected');

$("#id_index").val(index);
$("#id_container_name").val(rowData.container_name);
$('#dlg').dialog('open');
}

效果如果所示：

点击修改，弹出窗口（其实是事先做好的div）

注意：EasyUI弹出的消息框的按钮默认是英文的，我们可以改成中文：

$.extend($.messager.defaults,{
ok:"确定",
cancel:"取消"
});

效果如图：

Ok，Cancel变成了确定，取消

关于左侧的服务器列表的实现方式是：

html代码：

</div>
<ul class="mainul">
</ul>

js代码：

$.getJSON("container/lookContainers",
function(data){
$("ul.mainul li").remove();
for (var i=0;i<data.length;i++)
{
//server_item has server_id,server_name,ip,children
var server_item=data[i];
var li='<li><a href="'+server_item.server_id+'">'+server_item.server_name+'</a><input type="button" class="closeli"/></li>';
$("ul.mainul").append(li);
}
});

li的绑定事件代码是：

var $div_li =$("ul.mainul li");
$div_li.click(function(){
var server_id=$(this).find('a').attr("href");
$("#txt_serverid").val(server_id);
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其他同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素在全部li元素中的索引。

。。。。。。。。。

}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});

效果是：

0 0