easyui datagrid的问题

Veröffentlicht am | in . . |

datagrid的两种定义方式(先引入easyui框架)

1
2
3
4
5
6
7
8
<table  class="easyui-datagrid" url="data.php"
	close="false"
	fit="true"
	pagination="true"
	rownumbers="true" fitColumns="true" singleSlect="true"
>

</table>

第二种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

 <table class="easyui-dialog" id="tt"></table>

<script>
	$('#tt').datagrid({
        iconCls:'icon-edit',
        width:1000,
        height:356,
        url:'<%=basePath%>sys/depart/list.do?timestamp=' + (new Date()).getTime(),
        pagination:true,
        singleSelect:true,
        columns:[[
            {field:'departName',title:'部门名称',width:600,editor:'numberbox',
            	formatter: function(value, row, index) {
                    var abValue = value;
                    if (value.length>=22) {
                        abValue = value.substring(0,19) + "...";
                    }
                    var content = '<a href="#" title="' + value + '" style="color:#161616;" class="note">' + abValue + '</a>';
                    return content;
            	}
			},
            {field:'employeeCount',title:'部门员工数',width:300,editor:'text',
				formatter: function(value, row, index) {
                    var abValue = value;
                    if (value.length>=22) {
                        abValue = value.substring(0,19) + "...";
                    }
                    var content = '<a href="#" title="' + value + '" class="note" style="color:#161616;">' + abValue + '</a>';
                    return content;
            	}
            },
            {field:'action',title:'操作',width:100,align:'center',
                formatter:function(value, row, index){
                    if (row.editing){
                        var s = '<a href="javascript:void(0);" onclick="rowSave('+row.id+')">保存</a> ';
                        var c = '<a href="javascript:void(0);" onclick="rowCancel('+row.id+')">取消</a>';
                        return s+c;
                    } else {
                        var e = '<a href="javascript:void(0);" onclick="rowEdit('+row.id+')">编辑</a> ';
                      //  var d = '<a href="javascript:void(0);" onclick="rowDelete('+row.id+')">删除</a>';
                        return e;
                    }
                }
            }
        ]],
        onLoadSuccess:function(data)
        {
           $("#tt").tooltip(
               {
               onShow: function(){
                   $(this).tooltip('tip').css({ 
                       width:'300',
                       
                       boxShadow: '1px 1px 3px #292929'                        
                   });
               }
           }
           );
        }
        /* ,
        toolbar:[{
            text:'增加',
            iconCls:'icon-add',
            handler:rowAdd
        }] */
    });
</script>

##datagrid 在移动端上表头固定，左右滑动内容的问题（在pc端适应datagrid父级宽度高度，页码位置不变内容滚动） ##

只需要给datagrid一个fit=true;属性，并给datagrid一个固定宽度高度的父级，否则fit失效,内容不显示；

datagrid的tooltip提示框的问题 （鼠标移入时，显示提示文字内容）

在需要展示的某一个格对应的位置formatter函数为

1
2
3
4
5
6
7
8
9
10
{field:'employeeCount',title:'部门员工数',width:300,editor:'text',
	formatter: function(value, row, index) {
	    var abValue = value;
	    if (value.length>=22) {
	        abValue = value.substring(0,19) + "...";
	    }
	    var content = '<a href="#" title="' + value + '" class="note" style="color:#161616;">' + abValue + '</a>';
	    return content;
	}
	}

并在datagrid的onLoadSuccess（加载成功函数里加入以下函数，注意一定要加）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
onLoadSuccess:function(data)
{
   $("#tt").tooltip(
       {
       onShow: function(){
           $(this).tooltip('tip').css({ 
               width:'300',
               
               boxShadow: '1px 1px 3px #292929'                        
           });
       }
   }
   );
}