EasyUI datagrid

       第一步：加载easyui 库文件，注意顺序喔。

       <link rel="stylesheet" href="../easyui/themes/icon.css" type="text/css"></link>
       <link rel="stylesheet" href="../easyui/themes/default/easyui.css"type="text/css"></link>
<script type="text/javascript" src="../easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"src="../easyui/locale/easyui-lang-zh_CN.js">
      第二步：写好html标签

        <table id="tt"></table>

      第三步：写好JS代码

         $(function() {
var dd = $('#dd').dialog( {
title : '查询',
width : 400,
height : 200,
closed : true,
cache : false,
modal : true
});
var data = $('#tt').datagrid( {
url : 'http://localhost:8080/Role/sw',
title : '作业显示',
nowrap : false,
idField : 'id',
border : true,
fitColumns : true,
pageList : [ 2, 4, 6 ],
checkbox : true,
pagination : true,
pageSize : 4,
rownumbers : true,
columns : [ [ {
field : 'id',
title : 'ID',
checkbox : true,
width : 100
}, {
field : 'workname',
title : '作业名',
width : 100
}, {
field : 'user',
title : '所属用户',
width : 100
}, {
field : 'state',
title : '完成状态',
width : 100
} ] ],
singleSelect : true,
toolbar : [ {
text : '增加',
iconCls : 'icon-add',
handler : function() {
var rows = data.datagrid("getSelected");
if (rows) {
alert(rows.id + "\t" + rows.workname);
}
}
}, {
text : '删除',
iconCls : 'icon-cut',
handler : function() {
var row = data.datagrid('getSelected'); 
            if (row){  
                $.post('http://localhost:8080/Role/del',{id:row.id},function(result){  
                    if (result.success){  
                        data.datagrid('reload');     
                    } else {  
                        $.messager.show({  
                            title: 'Error',  
                            msg: result.errorMsg  
                        });  
                    }  
                },'json');  
            }  
       }
 
}, {
text : '修改',
iconCls : 'icon-edit',
handler : function() {
alert('save')
}
}, {
text : '查询',
iconCls : 'icon-search',
handler : function() {
dd.dialog('open');
}
} ]
});


});