`
ForgetLove
  • 浏览: 24112 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

easyui

 
阅读更多
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>

<link rel="stylesheet" type="text/css" href="../easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
<script type="text/javascript" src="../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>


<script type="text/javascript">

    function jsonTimeStamp(milliseconds) {
        if (milliseconds != "" && milliseconds != null
                && milliseconds != "null") {
            var datetime = new Date();
            datetime.setTime(milliseconds);
            var year = datetime.getFullYear();
            var month = datetime.getMonth() + 1 < 10 ? "0"
            + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var date = datetime.getDate() < 10 ? "0" + datetime.getDate()
                    : datetime.getDate();
            var hour = datetime.getHours() < 10 ? "0" + datetime.getHours()
                    : datetime.getHours();
            var minute = datetime.getMinutes() < 10 ? "0"
            + datetime.getMinutes() : datetime.getMinutes();
            var second = datetime.getSeconds() < 10 ? "0"
            + datetime.getSeconds() : datetime.getSeconds();
            return year + "-" + month + "-" + date + " " + hour + ":" + minute
                    + ":" + second;
        } else {
            return "";
        }

    }

    function updateWebsite() {

        //获取选择的复选框
        var checkedItems = $('#resultList').datagrid('getChecked');
        var names = [];
        var ids = "";
        $.each(checkedItems, function (index, item) {
            //获取当前选择行在表格中的索引
            var index2 = $('#resultList').datagrid('getRowIndex', item);
            names.push(item.id);//把要传到后台的id存起来
            ids += item.id + ",";

            $('#resultList').datagrid('deleteRow', index2);//删除当前表格的选中行,页面效果(不用刷新)
        });
//        console.log(names.join(","));

        if (confirm("确认删除数据?条数 : " + names.length)) {
            $.ajax({
                type: "post",
                data: {ids: ids},
                url: "/api/adminUpdate.do?type=MON",
                dataType: "json",
                error: function (data) {
                    alert("操作异常:  " + data.process_msg);
                },
                success: function (data) {
                    var result = data.result;
                    if (result) {
                        alert("操作成功!删除成功  " + data.deleteData + " 条数据,删除失败  " + data.deleteError + " 条");
                        $('#resultList').datagrid('reload');
                    } else {
                        alert("操作失败" + data.process_msg);
                    }
                }
            });
        }
    }

    $(document).ready(function () {
        $('#resultList').datagrid({
            columns: [[
                {field: 'checkbox', checkbox:true},
                {field: 'id',title:'id'},
                {field: 'CATEGORY', title: '分类', width: '7%', sortable: 'true',formatter: function(value,row,index){
                    if(value=='1'){
                        return "分类1";
                    }else if(value=='2'){
                        return "分类2";
                    }else if(value=='3'){
                        return "分类3";
                    }else{
                        return "<font color='blue'>" + value + "</font>";
                    }

                }},
                {field: 'WEBSITE', title: 'WEBSITE', width: '7%', sortable: 'true'},
                {field: 'MONITOR', title: '字段名', width: '7%', sortable: 'true'},
                {field: '_RULES', title: '描述', width: '7%', sortable: 'true'},
                {field: 'TABLE', title: '表', width: '10%', sortable: 'true'},
                {field: 'code', title: 'code', width: '15%', sortable: 'true'},
                {field: 'LOGIN_NAME', title: '登录名', width: '13%', sortable: 'true'},
                {field: 'WEBSITE_NAME', title: '城市', width: '7%', sortable: 'true'},
                {field: 'CREATE_DATE', title: '创建时间', width: '10%', sortable: 'true',formatter:jsonTimeStamp}
            ]],
            singleSelect: false,
            selectOnCheck: true,
            checkOnSelect: true
//            ,
//            onDblClickCell: function (rowIndex, field, value) {
//                $('#showParamsByValue').html(value);
//                $('#restartDialog').window('open');
//            }
        });

        var pager = $('#resultList').datagrid('getPager');
        $(pager).pagination({
            pageSize: 20,//每页显示的记录条数,默认为10
            onSelectPage: function (pageNumber, pageSize) {
                $(this).pagination('loading');
                $('#resultList').datagrid("reload", {pageNo: pageNumber, pageSize: pageSize});
                $(this).pagination('loaded');
            }
        });

    });

    //关闭弹层显示
    function closeWindow(){
        $('#restartDialog').window('close');
    }


    function page_search() {
        var category = $("#category").val();
        var website = $("#website").val();

        if(category == -1){
            category = "";
        }

        // 先通过ajax获取数据,然后再传给datagrid
        $.ajax({
            method : 'POST',
            url : '/api/adminQuery.do?type=MO&category='+category + "&website=" + website,
            async : false,
            dataType : 'json',
            beforeSend : function(jqXHR) {
                jqXHR.setRequestHeader('Authorization', 'Bearer '
                        + '3feee5b76d8e698f4');
            },
            success : function(data) {


                var basiclist = [];
                basiclist = data.raw_data;

                if(data.process_code != 'SCCS104'){
                    alert(data.process_msg);
                }else if(basiclist.length == 0){
                    alert("没有数据");
                }

                $('#resultList').datagrid("loadData", basiclist);
                var basicdata = basiclist;
                $('#resultList').datagrid("loadData", basicdata.slice(0, 20));
                $('#resultList').datagrid("getPager").pagination({
                    total:basicdata.length,
                    onSelectPage:function (pageNo, pageSize) {
                        var start = (pageNo - 1) * pageSize;
                        var end = start + pageSize;
                        $("#resultList").datagrid("loadData", basicdata.slice(start, end));
                        $(this).pagination('refresh', {
                            total:basicdata.length,
                            pageNumber:pageNo
                        });
                    }
                });

            },
            error : function() {
                alert('error');
            }
        });


    }

</script>

<style>

    #showParamsByValue {
        margin-top: 2%;
    }

    .data-tips-info {
        font-size: small;
        font-weight: lighter;
        margin-top: 3%;
    }

    tbody tr{
        height: 40px !important;
    }

    body {
        font-size: 20px !important;
    }

</style>

<div class="search-main">
    <div class="search-conditions">
        分类:
        <select name="category" id="category" >
            <option value="-1">请选择</option>
            <option value="1">分类1</option>
            <option value="2">分类2</option>
            <option value="3">分类3</option>
        </select>
        website:<input type="text" name="website" id="website" class="easyui-textbox" style="width:10%"/>
        <button name="search" class="easyui-linkbutton" style="width:60px" onclick="page_search();">查 询</button>
    </div>
    <p></p>
    <div id="tt" class="easyui-tabs" style="width:100%;height:160%;">
        <div title="查询结果" style="padding:10px;height:97%;" id="basic" align="center">

            <div id="tb" style="width: 98%;" align="left">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="updateWebsite()">删 除</a>
               
            </div>

            <table id="resultList" class="easyui-datagrid c-datagrid" title="查询结果" style="height:80%"
                   data-options="singleSelect:true,collapsible:true,
           				 method:'post', pagination:'true', pageSize:'20',sortName:'id',sortOrder:'asc',rownumbers:'true'">
            </table>

        </div>

    </div>
</div>

 

 

页面代码如上


实现功能:  不使用easyui 的原生删除方法(直接传删除链接)。进行批量删除,通过获取选中行前的复选框在当前表格的索引进行页面无刷新效果实现

  • 大小: 72.3 KB
分享到:
评论

相关推荐

    easyUI例子_easyui1.4.4_一套EASYUI的经典后台管理模板_jquery_

    EasyUI 是一个基于 jQuery 的前端框架,主要用于快速构建用户界面,尤其适用于后台管理系统。这个"easyUI例子_easyui1.4.4"压缩包提供了一套使用 EasyUI 1.4.4 版本的经典后台管理模板,适用于开发人员快速搭建功能...

    jQuery EasyUI 1.3.2 离线API简体中文版

    近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案,所以查了一下EasyUI的相关资料,发现离线的中文API不太多,而且版本都比较老,索性自己讲EasyUI官网给扣下来,然后做了翻译,文档是2月份过年的时候...

    jquery-easyui-themes.rar_easyui 主题_easyui主题_html_jquery_jquery-e

    《jQuery EasyUI 主题详解与应用》 jQuery EasyUI 是一款基于 jQuery 的前端框架,它提供了丰富的组件和易于使用的API,极大地简化了Web界面的开发。而其核心魅力之一,便是丰富的主题系统,使得开发者可以轻松定制...

    EasyUI InsdepTheme EasyUI的皮肤美化 免费版

    EasyUI InsdepTheme是一款基于EasyUI的皮肤美化版本,它为开发者提供了更加美观且自定义的界面风格。EasyUI是一个轻量级的JavaScript框架,主要用于构建Web应用的用户界面,它基于jQuery,提供了丰富的组件和易用的...

    easyui1000个ico图标

    EasyUI 是一个基于 jQuery 的前端开发框架,专为构建用户界面而设计。它提供了一套完整的组件和样式,包括布局、表格、对话框、菜单、按钮等,使得开发者能够快速地构建出美观且功能丰富的 web 应用。在这个“easyui...

    jquery-easyui-1.4.5_easyuiapi_

    《jQuery EasyUI 1.4.5 API详解》 jQuery EasyUI 是一款基于 jQuery 的前端框架,它提供了丰富的用户界面组件,使得开发者可以快速构建出美观且功能强大的Web应用。在本文中,我们将深入探讨jQuery EasyUI 1.4.5...

    easyui官方离线文档

    EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。这个"easyui官方离线文档"包含了丰富的资源,包括demo、源码、演示以及针对现代前端框架如Vue、Angular和React的...

    全套EasyUI示例源码

    EasyUI 是一款基于 jQuery 的 UI 组件库,它提供了丰富的界面元素和布局功能,使得开发者能够快速构建出美观且响应式的 web 应用程序。"全套EasyUI示例源码"是一个包含三十多个组件的完整示例集合,可以帮助开发者...

    easyui的入门教程

    EasyUI 是一个基于 jQuery 的前端框架,用于快速构建用户界面。它简化了网页开发过程,提供了丰富的组件和统一的API接口,使得开发者可以更专注于业务逻辑而非页面展示的细节。这个"jQuery_EasyUI_v1.3.5.exe"文件很...

    uimaker分享-免费漂亮easyui主题eayui皮肤easyui组件美化模版黑色+蓝色html后台管理模版

    EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了丰富的组件和易于使用的主题系统,使得开发者能够快速构建用户界面。本套分享的资源是一组免费且漂亮的 EasyUI 主题,包括黑色和蓝色两种风格,适用于后台管理...

    最新EasyUI扁平化

    EasyUI是中国程序员喜爱的一款基于jQuery的前端用户界面框架,它为快速开发Web应用提供了丰富的组件和功能。"最新EasyUI扁平化"标题暗示我们关注的是EasyUI的一个更新版本,可能着重于现代扁平化设计趋势,这在当前...

    EasyUI 多层导航框架

    【EasyUI 多层导航框架】是一个基于JavaScript和CSS的前端框架,专为构建具有高效用户体验的Web应用程序而设计。EasyUI提供了一系列组件,包括布局、表格、对话框、菜单、按钮、表单等,而多层导航框架则是其在实际...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    在前端开发中,EasyUI 是一个基于 jQuery 的 UI 框架,它提供了一系列美观、易用的组件,用于构建用户界面。在这个实例中,我们将深入探讨 EasyUI 中的两个重要组件:`easyui-textbox` 和 `easyui-combobox`,以及...

    easyui视频教程(6)

    EasyUI 是一个基于 jQuery 的轻量级用户界面框架,它为开发者提供了丰富的组件,包括布局、表格、对话框、树形菜单、表单等,帮助快速构建美观且响应式的 web 应用程序。"easyui 视频教程(6)"显然是针对初学者设计的...

    简单的easyui页面

    EasyUI是一种基于JavaScript和CSS的前端框架,专为构建用户界面而设计,尤其适用于后台管理系统。这个名为"简单的easyui页面"的项目提供了一个简化版的EasyUI页面,非常适合用作前台UI界面,以实现简洁、高效的用户...

    easyUI全套文档及案例

    EasyUI 是一款基于 jQuery 的轻量级前端框架,主要用于构建用户界面,尤其在企业级Web应用中广泛应用。它提供了一套完整的组件,包括布局、表格、表单、按钮、菜单、对话框等,大大简化了网页开发的工作。这套...

    EasyUI 中文API下载无需安装

    EasyUI是一款基于jQuery的前端开发框架,主要用于构建用户界面,尤其在数据管理、表单处理以及页面布局方面表现优秀。其设计目标是简化Web应用程序的开发,让开发者能快速创建美观且功能丰富的交互式界面。这个...

    EasyUI登录页面.zip

    EasyUI是一种轻量级的前端开发框架,专为简化网页应用和后台管理系统界面设计而创建。这个名为"EasyUI登录页面.zip"的压缩包文件包含了使用EasyUI框架构建的一个登录页面的相关资源。EasyUI框架主要基于jQuery,它...

    easyUI时间控件使用

    在本文中,我们将深入探讨如何在EasyUI框架中有效地使用时间控件,以及如何解决时间格式化的问题。EasyUI是一个基于jQuery的轻量级前端开发框架,它提供了一系列丰富的组件,帮助开发者快速构建用户界面。时间控件是...

    EasyUI_Icon_图标扩展样式(1775个)

    EasyUI 是一个基于 jQuery 的前端框架,主要用于构建用户界面,尤其适用于企业级的 Web 应用。它提供了丰富的组件,如表格、下拉菜单、对话框、按钮等,并且内置了一些基本的图标(Icon)。然而,正如标题和描述中...

Global site tag (gtag.js) - Google Analytics