第一个月：easyui前端框架之datagrid

js：

$(function() {

    $('#tb_doctor')
            .datagrid(
                    {
                        iconCls : 'icon-ok',
                        pageSize : 10,
                        pageList : [ 10, 15, 30, 40, 50, 100, 200 ],
                        nowrap : true,// 设置为true，当数据长度超出列宽时将会自动截取
                        striped : true,// 设置为true将交替显示行背景。
                        collapsible : true,// 显示可折叠按钮
                        toolbar : "#tb",// 在添加 增添、删除、修改操作的按钮要用到这个
                        url : contextPath + "/hospital/getDoctors",// url调用Action方法
                        columns : [ [
                                {
                                    field : 'id',
                                    title : '主键',
                                    hidden : true
                                },
                                {
                                    field : 'h_name',
                                    title : '医院名称',
                                    width : 30,
                                    align : 'left',
                                    halign : 'center'
                                },
                                {
                                    field : 'd_code',
                                    title : '医生代码',
                                    width : 25,
                                    align : 'left',
                                    halign : 'center'
                                },
                                {
                                    field : 'd_name',
                                    title : '医生姓名',
                                    width : 20,
                                    align : 'left',
                                    halign : 'center'
                                },
                                {
                                    field : 'd_picture',
                                    title : '医生照片',
                                    align : 'center',
                                    halign : 'center',
                                    width : 10,
                                    formatter : function(value, row, index) {
                                        return "<img onclick='showImg(this)' style='width:24px;height:24px;' border='1' src='"
                                                + row.d_picture + "'/>";
                                    }
                                },
                                {
                                    field : 'd_remark',
                                    title : '备注',
                                    width : 80,
                                    align : 'left',
                                    halign : 'center'
                                },
                                {
                                    field : 'operation',
                                    title : '操作',
                                    align : 'center',
                                    halign : 'center',
                                    width : 30,
                                    formatter : function(value, row, index) {
                                        var btn = '<a href="javascript:void(0);" class="easyui-linkbutton" onClick="javascript:updateDoctor('
                                                + row.d_id
                                                + ')">修改</a> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;<a href="javascript:void(0);" class="easyui-linkbutton" onClick="javascript:deleteDoctor('
                                                + row.d_id + ')">删除</a>';
                                        return btn;
                                    }
                                }, ] ],
                        loadMsg : false,
                        singleSelect : false,// 为true时只能选择单行
                        fitColumns : true,// 允许表格自动缩放，以适应父容器
                        remoteSort : false,
                        pagination : true,// 分页
                        rownumbers : true
                    });
});

// 图片展示点击事件
function showImg(img) {
    var hrefUrl = img.src;
    $('#showImg').dialog({
        title : '预览',
        width : 300,
        height : 300,
        resizable : true,
        closed : false,
        cache : false,
        modal : true
    });
    $("#doctorimg").attr("src", hrefUrl);
}

// 修改的点击事件函数
function updateDoctor(d_id) {
    var hrefUrl = contextPath + "/hospital/getDoctorById?d_id=" + d_id;
    $("#addDoctorDialog").dialog({
        title : '修改医生信息',
        width : 600,
        height : 400,
        closed : false,
        cache : false,
        href : hrefUrl,
        resizable : false,
        modal : true,
    });
}

// 删除的点击事件函数
function deleteDoctor(d_id) {
    var hrefUrl = contextPath + "/hospital/deleteDoctor?d_id=" + d_id;
    $.messager.confirm('确认框', '确认删除', function(r) {
        if (r) {
            $.ajax({
                url : hrefUrl,
                success : function(data) {
                    $('#tb_doctor').datagrid('reload');
                }
            });
        }
    });

}

jsp页面：

<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>医生管理</title>
    <link href="${pageContext.request.contextPath }/css/base.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/easyui.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/icon.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/qcsm/doctor.css" rel="stylesheet">
    <script type="text/javascript">
        var contextPath = "${pageContext.request.contextPath }";
    </script>
</head>
<body>
    <div class="container">
       <table id="tb_doctor" style="width:100%;height:554px" title="全体医生列表" >
            <thead>
            </thead>
        </table>
       <div id="tb" style="padding:0 30px;">
        <div class="opt-buttons">
            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="selected:true" id="addDoctor">新增</a> &nbsp;&nbsp;
        </div>
      </div>
    </div>
    
    <div id="showImg"><img id="doctorimg" style="width:100%;height:100%" /></div>
    <div id="addDoctorDialog"></div>
    
    <script src="${pageContext.request.contextPath }/js/jquery.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath }/js/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath }/js/qcsm/baseTable.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath }/js/qcsm/doctor.js" type="text/javascript"></script>