Print Page - How to fix a treegrid field

I donno how to fix em:
When I append a new row to a treegrid:

Code:

var newRow = {
                        data: [{
                            Id: 0,
                            iconCls: 'icon-ok',
                            _parentId: parentId //lost when equals 0
                        }]
                    };
                    if (parentId != 0) {
                        newRow.parent = parentId; //"too much recursion" if 0 assigned
                    }
                    $(this).treegrid('append', newRow);

TreeField of the new row has a corrent indent now, then I use beginEdit to make it editable

Code:

$(this).treegrid('beginEdit', id);
$(tg).treegrid('endEdit', id);

The treeField lost its indent, this doesn't happen on the loaded rows.

Quote from: stworthy on October 13, 2015, 01:27:27 AM

How do you define the treegrid? And how do you call these code? Please describe your question clearly.

Sure, I just wrote a simplified version to reproduce the problem.

Code:

<!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>
    <title>Sample</title>
    <link href="themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="themes/icon.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

    <script type="text/javascript" src="jquery.easyui.min.js"></script>

    <script type="text/javascript">
    var editId = undefined;
    function addRow() {
        var node = $('#tg').treegrid('getSelected');
        if (node) {
            var newRow = {
                parent: node.Id,
                data: [{
                    Id: 0,
                    iconCls: 'icon-cancel',
                    _parentId: node.Id
                }]
            };
            $('#tg').treegrid('append', newRow);
        }
    };
    function editRow() {
        var node = $('#tg').treegrid('getSelected');
        if (node) {
            $('#tg').treegrid('beginEdit', node.Id);
            editId = node.Id;
        }
    };
    function save() {
        if (editId != undefined) {
            $('#tg').treegrid('endEdit', editId);
            editId = undefined;
        }
    };
    function reject() {
        if (editId != undefined) {
            $('#tg').treegrid('cancelEdit', editId);
            editId = undefined;
        }
    };
    </script>

</head>
<body>
    <table id="tg" class="easyui-treegrid" fit="true" singleselect="true" url="data.json"
        method="get" idfield="Id" treefield="Code" animate="true" toolbar="#tb" data-options="footer: '#ft'">
        <thead>
            <tr>
                <th field="Id" width="20%" align="center" hidden="true">
                    Id
                </th>
                <th field="Code" width="20%" align="left" editor="textbox">
                    Code
                </th>
                <th field="Name" width="20%" align="center" editor="textbox">
                    Name
                </th>
                <th field="_parentId" width="20%" align="center" hidden="true">
                    Parent
                </th>
                <th field="iconCls" width="20%" align="center" editor="textbox">
                    Icon
                </th>
            </tr>
        </thead>
    </table>
    <div id="ft" style="padding: 2px 5px;">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"
            onclick="addRow();">New</a> <a href="javascript:void(0)" class="easyui-linkbutton"
                iconcls="icon-remove" plain="true" onclick="editRow();">Edit</a> <a href="javascript:void(0)"
                    class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="removeRow();">
                    Remove</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-save"
                        plain="true" onclick="save();">Save</a> <a href="javascript:void(0)" class="easyui-linkbutton"
                            iconcls="icon-undo" plain="true" onclick="reject();">Cancel</a>
    </div>
</body>
</html>

pls
1 New a child node
2 Edit the new node
3 Press save button

update: the json data

Code:

{"total":3,"rows":[{
	"Id":1,
	"Code":"Admin",
	"Name":"Bill",
	"_parentId":0,
	"iconCls":"icon-ok"
},{
	"Id":2,
	"Code":"User",
	"Name":"Smith",
	"_parentId":1,
	"iconCls":"icon-ok"
},{
	"Id":3,
	"Code":"User",
	"Name":"White",
	"_parentId":2,
	"iconCls":"icon-ok"
}]}

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: CLKG on October 13, 2015, 12:43:48 AM