Print Page - treegird editor align bug

Title: treegird editor align bug
Post by: zhangjin on June 01, 2015, 10:13:25 PM

When the treegrid editor using the checkbox, open the edit state after the checkbox is not centered.
code:
        <table id="report_selected_fields_grid" class="easyui-treegrid" title="已选字段" style="width:100%;height:100%;"
        data-options="
        iconCls: 'icon-ok',
        rownumbers: true,
        animate: true,
        fitColumns: true,
           url:'bi/page/treegrid_data2.json',
        method: 'get',
        idField: 'id',
      treeField: 'columnName',
        showFooter: true,
        dnd:true,
        onContextMenu: selectedFieldOnContextMenu,
        onDblClickCell:editSelectedFieldRow,
        onClickCell:cancelEditSelectedFieldRow,
        onLoadSuccess: function(row){
           $(this).treegrid('enableDnd', row?row.id:null);
           }
        ">
        <thead>
               <tr>
        <th data-options="field:'columnName',width:120,editor:'text'">名称</th>
        <th data-options="field:'columnType',width:50,align:'center'">列类型</th>
        <th data-options="field:'dataSource',width:80,align:'center'">数据源</th>
        <th data-options="field:'dataType',width:60,align:'center'">数据类型</th>
        <th data-options="field:'sortable',width:50,align:'center',formatter:sortableFormat">可排序</th>
        <th data-options="field:'exportable',width:50,align:'center',formatter:exportableFormat">可导出</th>
        <th data-options="field:'printable',width:50,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">可打印</th>
        <th data-options="field:'defaultSort',width:100,align:'center',formatter:defaultSortFormat">默认排序</th>
        </tr>
        </thead>
        </table>

Title: Re: treegird editor align bug
Post by: jarry on June 01, 2015, 11:57:26 PM

Please refer to this example http://jsfiddle.net/s0f680u1/. It works fine.

Title: Re: treegird editor align bug
Post by: zhangjin on June 02, 2015, 01:43:16 AM

Quote from: jarry on June 01, 2015, 11:57:26 PM

Please refer to this example http://jsfiddle.net/s0f680u1/. It works fine.

jquery easyui1.4.2 can not .
code:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'report_add_head.jsp' starting page</title>

   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">

   <link rel="stylesheet" type="text/css" href="bi/js/jquery_easyui_1.4.2/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="bi/js/jquery_easyui_1.4.2/themes/icon.css">

   <script type="text/javascript" src="bi/js/jquery_easyui_1.4.2/jquery.min.js"></script>
   <script type="text/javascript" src="bi/js/jquery_easyui_1.4.2/jquery.easyui.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var data = {"total":7,"rows":[
   {"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},
   {"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},
   {"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
   {"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2},
   {"id":23,"name":"Export Document","persons":1,"begin":"3/9/2010","end":"3/10/2010","progress":100,"_parentId":2},
   {"id":3,"name":"Coding","persons":2,"begin":"3/11/2010","end":"3/18/2010","progress":80},
   {"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}
],"footer":[
   {"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}
]}

$('#tg').treegrid({
data: data,
onLoadSuccess: function(){
$(this).treegrid('beginEdit',3);
}
});

});//]]>

</script>

</head>
<body>
<table id="tg" title="Editable TreeGrid" style="height:250px"
data-options="
rownumbers: true,
animate: true,
fitColumns: true,
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name',width:180,editor:'text'">Task Name</th>
<th data-options="field:'persons',width:60,align:'right',editor:'numberbox'">Persons</th>
<th data-options="field:'progress',width:60,editor:'numberbox'">Progress</th>
<th data-options="field:'ck',width:60,align:'center',
editor:{
type:'checkbox',
options:{
on:'on',
off:''
}
}"></th>
</tr>
</thead>
</table>

</body>

</html>

Title: Re: treegird editor align bug
Post by: jarry on June 02, 2015, 01:58:05 AM

Please correct your page with the right DOCTYPE.

Code:

<!DOCTYPE html>
<html>
...
</html>

Title: Re: treegird editor align bug
Post by: zhangjin on June 12, 2015, 08:52:29 PM

Ok ! Think you !

EasyUI Forum

General Category => Bug Report => Topic started by: zhangjin on June 01, 2015, 10:13:25 PM