easyui datagrid 事例

最新推荐文章于 2021-02-12 20:34:21 发布

Mr_fly520

最新推荐文章于 2021-02-12 20:34:21 发布

阅读量403

点赞数 1

分类专栏： easyui

本文链接：https://blog.csdn.net/sinat_36414207/article/details/79892673

版权

easyui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里写图片描述

注意:

<div region="center" border="false">
        <table id="grid"></table>
    </div>

如上所示要将选项卡包裹起来,否则会出现
这里写图片描述
这种分页栏部分被遮住的情况

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath }/css/default.css">    
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>
<script
    src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
    type="text/javascript"></script>
<script type="text/javascript">
    function doAdd(){
        //alert("增加...");
        $('#addStaffWindow').window("open");
    }

    function doView(){
        alert("查看...");
    }

    function doDelete(){
        var rows = $("#grid").datagrid("getSelections");
        if(rows.length == 0){
            $.messager.alert("提示","请选择!","warning");
        }else{
            $.messager.confirm("删除确认","你确定要删除选中项吗?",function(r){
                    if(r){
                            //确定删除,发送请求
                            /* for(var i=0;i<rows.length;i++){


                                } */

                            location.href = "staffAction_deleteBatch?ids="+JSON.stringify(rows);
                        }
                });


            }
    }

    function doRestore(){
        alert("将取派员还原...");
    }
    //工具栏
    var toolbar = [ {
        id : 'button-view', 
        text : '查询',
        iconCls : 'icon-search',
        handler : doView
    }, {
        id : 'button-add',
        text : '增加',
        iconCls : 'icon-add',
        handler : doAdd
    }, {
        id : 'button-delete',
        text : '作废',
        iconCls : 'icon-cancel',
        handler : doDelete
    },{
        id : 'button-save',
        text : '还原',
        iconCls : 'icon-save',
        handler : doRestore
    }];
    // 定义列
    var columns = [ [ {
        field : 'id',
        checkbox : true,
    },{
        field : 'name',
        title : '姓名',
        width : 120,
        align : 'center'
    }, {
        field : 'telephone',
        title : '手机号',
        width : 120,
        align : 'center'
    }, {
        field : 'haspda',
        title : '是否有PDA',
        width : 120,
        align : 'center',
        formatter : function(data,row, index){
            if(data=="1"){
                return "有";
            }else{
                return "无";
            }
        }
    }, {
        field : 'deltag',
        title : '是否作废',
        width : 120,
        align : 'center',
        formatter : function(data,row, index){
            if(data=="0"){
                return "正常使用"
            }else{
                return "已作废";
            }
        }
    }, {
        field : 'standard',
        title : '取派标准',
        width : 120,
        align : 'center'
    }, {
        field : 'station',
        title : '所谓单位',
        width : 200,
        align : 'center'
    } ] ];

    $(function(){
        // 先将body隐藏，再显示，不会出现页面刷新效果
        $("body").css({visibility:"visible"});

        // 取派员信息表格
        $('#grid').datagrid( {
            iconCls : 'icon-forward',
            fit : true,
            border : false,
            rownumbers : true,
            striped : true,
            pageList: [2,4,6],
            pagination : true,
            toolbar : toolbar,
            url : "${pageContext.request.contextPath }/staffAction_pageQuery",
            idField : 'id', //识别id,重点
            columns : columns,
            onDblClickRow : doDblClickRow
        });

        // 添加取派员窗口
        $('#addStaffWindow').window({
            title: '添加取派员',
            width: 400,
            modal: true,
            shadow: true,
            closed: true,
            height: 400,
            resizable:false
        });

    });

    function doDblClickRow(rowIndex, rowData){
        //打开修改取派员窗口
        $('#addStaffWindow').window("open");
        //使用form表单对象的load方法回显数据
        $("#addStuffForm").form("load",rowData);
    }
    $(function(){
        $.extend($.fn.validatebox.defaults.rules, { 

            telephone: { 

            validator: function(value, param){ 

            return value.length == 11; 

            }, 

            message: '输入错误' 

            } 

            }); 

        $("#save").click(function(){
                var v = $("#addStuffForm").form("validate");
                if(v){
                    $("#addStuffForm").submit();
                }
            });




        });


</script>   
</head>
<body class="easyui-layout" style="visibility:hidden;">
    <div region="center" border="false">
        <table id="grid"></table>
    </div>
    <div class="easyui-window" title="对收派员进行添加或者修改" id="addStaffWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
        <div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
            <div class="datagrid-toolbar">
                <a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>
            </div>
        </div>

        <div region="center" style="overflow:auto;padding:5px;" border="false">
            <form id="addStuffForm" action="${pageContext.request.contextPath }/staffAction_add }" method="post">
                <table class="table-edit" width="80%" align="center">
                <input type="hidden" name="id" />
                    <tr class="title">
                        <td colspan="2">收派员信息</td>
                    </tr>
                    <!-- TODO 这里完善收派员添加 table -->
                    <!-- <tr>
                        <td>取派员编号</td>
                        <td><input type="text" name="id" class="easyui-validatebox" required="true"/></td>
                    </tr> -->
                    <tr>
                        <td>姓名</td>
                        <td><input type="text" name="name" class="easyui-validatebox" required="true"/></td>
                    </tr>
                    <tr>
                        <td>手机</td>
                        <td><input data-options="validType:'telephone'" type="text" name="telephone" class="easyui-validatebox" required="true"/></td>
                    </tr>
                    <tr>
                        <td>单位</td>
                        <td><input type="text" name="station" class="easyui-validatebox" required="true"/></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                        <input type="checkbox" name="haspda" value="1" />
                        是否有PDA</td>
                    </tr>
                    <tr>
                        <td>取派标准</td>
                        <td>
                            <input type="text" name="standard" class="easyui-validatebox" required="true"/>  
                        </td>
                    </tr>
                    </table>

            </form>
        </div>
    </div>
</body>
</html>

Mr_fly520

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui datagrid 事例

注意:&lt;div region="center" border="false"&gt; &lt;table id="grid"&gt;&lt;/table&gt; &lt;/div&gt;如上所示要将选项卡包裹起来,否则会出现这种分页栏部分被遮住的情况&lt;%@ page language="java&quot
复制链接

扫一扫