easyui datagrid编辑

http://www.jeasyui.net/extension/202.html

 

1.保证引入必要的js包,这些在压缩包里都,(datagrid-cellediting.js这个包一下要在datagrid创建之前引入,我是因为这个迷惑了一会儿)

    <link rel="stylesheet" type="text/css" href="./js/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="datagrid-cellediting.js"></script>

 

2.在列中添加editor(editor有多种类型,这里只写了一种)

            $('#id').datagrid({
                url: '',
                method: 'get',
                iconCls: 'icon-reload',
                pagination: true,
                pageNumber: 0,
                pageSize: 20,
                pageList: [20, 40, 100, 200, 500],
                striped: true,
                rownumbers: true,
                menuSetFunc: null,
                columns: [[
                    {field: 'g_customer_no', title: "客户账号", sortable: true, width: 100, align: 'center',editor:'text'},
                ]]
            }).datagrid("columnMoving");
 

 

3. 数据可以编辑js(在生成datagrid后执行)
$('#id').datagrid('enableCellEditing');