使用Jquery miniui插件写的一个管理员对员工的操作

（一）使用Jquery miniui(很好的)插件写的一个管理员对员工的操作(新人，请多关照)

在http://www.miniui.com/download/ 下载 jQuery MiniUI (for Java Myeclipse) 

使用这个插件好处是在将数据库的数据取出后使用json直接在页面显示，不用el,ognl去遍历

管理界面

在使用插件之前先在jsp页面引用，在插件的webroot目录下scripts文件夹下

<link href="${pageContext.request.contextPath}/demo.css" rel="stylesheet" type="text/css" />
<script src="${pageContext.request.contextPath}/scripts/boot.js" type="text/javascript"></script>

        
下面是员工管理界面主页的代码
<div style="width:100%;">
<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
            <table style="width:100%; ">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" iconCls="icon-add" οnclick="add()">增加</a>
                        <a class="mini-button" iconCls="icon-add" οnclick="edit()">编辑</a>
                        <a class="mini-button" iconCls="icon-remove" οnclick="remove()">删除</a>       
                    </td>
                    <td style="white-space:nowrap;">
                        <input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>   
                        <a class="mini-button" οnclick="search()">查询</a>
                    </td>
                </tr>
            </table>           
        </div>
    </div>
    <div id="datagrid1" class="mini-datagrid"  style="width:100%;height:280px;" allowResize="true"
        url="employee_all"  idField="id" multiSelect="true" 
    >
        <div property="columns">
            <!-- <div type="indexcolumn"></div>   -->  <!--    -->
            <div type="checkcolumn" ></div> 
               <div header="图片">
                <div property="columns">
                    <div field="image" renderer="onGenderRenderer">头像</div>
                </div>
            </div> 
            <div field="id" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
            
            <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>  
         
            <div header="工作信息">
                <div property="columns">
                    <div field="deptname" width="120">所属部门</div>
                    <div field="job" width="100">职位</div>
                </div>
            </div>
            <div header="基本信息">
                <div property="columns">
               		
                    <div field="sex" width="100" renderer="onGenderRenderer">性别</div>
                    <div field="birthday" width="100" renderer="onBirthdayRenderer">入职时间</div>
                </div>
            </div>
        </div>
    </div>

javascripy代码

    <script type="text/javascript">
        mini.parse();
		
        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("createtime", "desc");
        function add() {
            mini.open({
                url:"${pageContext.request.contextPath}/employee_1/EmployeeWindow.jsp",
                title: "新增员工", width: 600, height: 400,
                onload: function () {
                    var iframe = this.getIFrameEl();
                    var data = { action: "new"};
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) {

                    grid.reload();
                }
            });
        }
        function edit() {
         
            var row = grid.getSelected();
            if (row) {
                mini.open({
                    url: "${pageContext.request.contextPath}/employee_1/EmployeeUpdate.jsp",
                    title: "编辑员工", width: 600, height: 400,
                    onload: function () {
                        var iframe = this.getIFrameEl();
                        var data = { action: "edit", id: row.id };
                        iframe.contentWindow.SetData(data);
                        
                    },
                    ondestroy: function (action) {
                        grid.reload();
                    }
                });
                
            } else {
                alert("请选中一条记录");
            }   
        }
        function remove() {
            
            var rows = grid.getSelecteds();
            if (rows.length > 0) {
                if (confirm("确定删除选中记录？")) {
                    var ids = [];
                    for (var i = 0, l = rows.length; i < l; i++) {
                        var r = rows[i];
                        ids.push(r.id);
                    }
                    var id = ids.join(',');
                    grid.loading("操作中，请稍后......");
                    $.ajax({
                        url: "employee_deleteEmployee?id=" +id,
                        success: function (text) {
                            grid.reload();
                        },
                        error: function () {
                        }
                    });
                }
            } else {
                alert("请选中一条记录");
            }
        }
        function search() {
            var key = mini.get("key").getValue();
            grid.load({ key: key });
        }
        function onKeyEnter(e) {
            search();
        }
        function onBirthdayRenderer(e) {
            var value = e.value;
            if (value) return mini.formatDate(value, 'yyyy-MM-dd');
            return "";
        }
        function onMarriedRenderer(e) {
            if (e.value == 1) return "是";
            else return "否";
        }
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];        
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }
    </script>
    <script type="text/javascript">
        mini.parse();
        var grid = mini.get("datagrid1");
        grid.load();
        grid.on("drawcell", function (e) {
            //取图片
            if (e.column.field == "image") {
             e.cellHtml ="<img src='"+e.value+"' width=50px; height=60px/>";
            }

        });
    </script>

关注微信公众号javamy012