EasyUI的DataGrid特殊字段的实现

html部分：

    data-options="singleSelect:true">   

 

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 'editContainer('+index+')">修改 | delContainer('+index+')">删除';
                    }},
                    {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 ''; 

 //选择前先取消遗留的选择项,否则连续修改两条记录就会出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代码：

   

 

  

js代码：

$.getJSON("container/lookContainers",  
            function(data){
        $("ul.mainul li").remove();
            for (var i=0;i             {
                //server_item has server_id,server_name,ip,children
                var server_item=data[i];
                var li='

'+server_item.server_name+'

';
                $("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")            //当前

元素高亮
  .siblings().removeClass("selected");  //去掉其他同辈

元素的高亮            
            var index =  $div_li.index(this);  // 获取当前点击的

元素 在 全部li元素中的索引。

。。。。。。。。。

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

效果是：