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 的原生删除方法（直接传删除链接）。进行批量删除，通过获取选中行在当前表格的索引进行页面无刷新效果实现