easyui datagrid 的使用

 <table id="tt" class="easyui-datagrid" style="" data-options="singleSelect:true,collapsible:true,idField:'rownumber'">
            <thead>
                <tr>
                    <th data-options="field:'edit',width:50" align="center">修改</th>
                    <th data-options="field:'del',width:50" align="center">删除</th>
                    @*<th data-options="field:'rownumber',width:50" align="center">序号</th>*@
                    <th data-options="field:'mname',width:200">专业</th>
                    <th data-options="field:'nname',width:80" align="center">年级</th>
                    <th data-options="field:'cname',width:150" align="center">班级</th>
                    <th data-options="field:'xueZhi',width:50,editor:'text'" align="center">学制</th>
                </tr>
            </thead>
        </table>

添加一行：

 function testadd() {
        var index = $('#tt').datagrid('getRows').length;
        if (rowindex == 0) rowindex = index + 1; else rowindex++;

        $('#tt').datagrid('appendRow', {
            rownumber: rowindex,
            edit: '<a href=javascript:edit(' + rowindex + ') id="href' + rowindex + '">修改</a>',
            del: '<a href=javascript:del(' + rowindex + ')>删除</a>',
            mname: '计算机',
            nname: '2015级',
            cname: '2015中二',
            xuezhi: '五年'
        });
        //$('#tt').datagrid('beginEdit', index)
    }

删除：

 function del(rowindex) {
        var index = $('#tt').datagrid('getRowIndex', rowindex);
        $('#tt').datagrid('deleteRow', index);    }

进入编辑状态：

function edit(rowindex) {
        var index = $('#tt').datagrid('getRowIndex', rowindex);

        var str = $('#href' + rowindex).text();
        if (str == "保存") {
            str = "修改";
            //结束编辑
            $('#tt').datagrid('endEdit', index);
            //这里需要保存值到数据库
            save(index);
        }
        else {
            if (editrows != undefined && editrows!=index) {
                //结束编辑
                $('#tt').datagrid('endEdit', editrows);
                //这里需要保存值到数据库
                save(editrows);
            }

            $('#tt').datagrid('beginEdit', index);
            editrows = index;
            $('#href' + rowindex).text("保存");
        }
    }

这可以在界面上操作完所有数据后在一次性保存到数据库中。
当然，也可以将del和save方法修改一下，直接单条保存到数据库，再获取一下数据源刷新界面

   function loadMajor()
    {
        $.post("listMajor", function (data) {
            data = JSON.parse(data);
            rowindex = data.total;
            $('#tt').datagrid('loadData', data);
        });
    }