easyUI 新增一行并使之处于编辑状态

首先创建一个HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑行</title>
    <!-- 引入jquery 和 easyUI-->
    <script src="jquery.min.js"></script>
    <script src="jquery.easyui.min.js"></script>

    <!-- 引入自己js-->
    <script src="demo.js"></script>
    <!-- 引入样式-->
    <link rel="stylesheet" href="datagrid.css">

</head>
<body>
    <div>
        <table>
            <td>
                <input type="button" id="add" onclick="add();" value="新增"/>
            </td>
        </table>
        <table id="left"></table>
        <table id="right"></table>
    </div>
</body>
</html>

对应的json文件

[
{"code":"FI-SW-01","name":"Koi"},
{"code":"K9-DL-01","name":"Dalmation"},
{"code":"RP-SN-01","name":"Rattlesnake"},
{"code":"RP-LI-02","name":"Iguana"},
{"code":"FL-DSH-01","name":"Manx"},
{"code":"FL-DLH-02","name":"Persian"},
{"code":"AV-CB-01","name":"Amazon Parrot"}
]

demo.js文件


$(function () {
    $("#left").datagrid({
        url:'products.json',
        columns:[[
            {field:'code',title:'Code',width:100, editor:{type:'text'}},
            {field:'name',title:'Name',width:100,editor:{type:'text'}},
            {field:'price',title:'Price',width:100,align:'right',editor:{type:'text'}}
        ]]
    })
})

function add() {
        //新增一行
        $("#left").datagrid("appendRow",{
            columns:[[
                {field:'code',title:'Code',width:100},
                {field:'name',title:'Name',width:100},
                {field:'price',title:'Price',width:100,align:'right'}
            ]]
        });
        //获取新增行的行数
        var editInedx = $("#left").datagrid("getRows").length-1;
        //新增行开启编辑状态
        $("#left").datagrid("beginEdit",editInedx);

}

效果展示

easyUI 新增一行并使之处于编辑状态

猜你喜欢