Javaweb表格加载---DataTable
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 使用 jQuery Datatable 构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求。同时, jQuery Datatable 强大的功能支持:排序,分页,搜索等。
datatable引入
- css : //cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
 js : //cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
这里申明一下,引入这上面js前提是引入jquery,因为这是基于jquery开发的
表格的创建
- 环境准备好之后,我们需要提供一个table的样板。就是给一个table 并命名一个ID,下面是我项目中class样式,你可以不引入只需要一个id
 
<table class="table table-striped table-hover table-bordered" id="adminTable">
</table>
参数说明
var  adminTable = $('#adminTable').DataTable({});
最后我们只需要在js中向上面那样就行了。只不过想要实现我们想象中的table我们需要对adminTable指定相应的参数。首先需要的就是请求地址的指定
sAjaxSource: 指定我们的请求路径
lengthMenu: 表格中每页的大小,就是下面的效果
pageLength:当前默认每页显示的数量
oLanguage:这里是一些语言的设置,提示语言的设置,默认是英文的,。
"sProcessing" : "正在加载数据...",
                    "sSearch" : "搜索:",
                    "sLengthMenu" : "_MENU_条记录",
                    "sZeroRecords" : "没有查到记录",
                    "sInfo" : "第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
                    "sInfoEmpty" : "0条记录",
                    "oPaginate" :
                    {
                        "sPrevious" : "上一页 ",
                        "sNext" : " 下一页",
                    }
还有一些额外的设置,
"bSort" : true,
"bProcessing" : true,
"bServerSide" : true,
"async" : false,最后数据显示才是重点。这个放在下面讲解
数据匹配显示
- 上面我们已经将表格的请求通过sAjaxSource这个属性指定好了,那么至于数据是如何显示在正确的位置的呢,主要是通过
aoColumns这个属性匹配的。首先我们看看我们后台发回来的数据长啥样子 
- aaDataa是我们的数据,一看就知道是个list,aaData下表就是所在索引,每个索引里面又有1-7的索引,1-7就是相当于我们表格的7列,所以我们前台table就是遍历aaData将1-7附在对应的列上,datatable也很简单,就是按照顺序赋值的的,所以我们按顺序写列名就行了
 
[
                        {
                            "sTitle" : "id",
                            "bSortable" : false
                        },
                        {
                            "sTitle" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" id="checkAll" onclick="adminChooseOrNoChoose(this)" /><span></span></label>',
                            "bSortable" : false,
                            "sClass" : "text-center",
                            "fnCreatedCell" : function(nTd, sData, oData,iRow, iCol)
                            {
                                var value = oData[0];
                                var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="testCheckbox" onclick="recordMainId(this)" value="'+value+'" /><span></span></label>';
                                $(nTd).html(content);
                            }
                        }, {
                            "sTitle" : "用户名",
                            "bSortable" : true,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "姓名",
                            "bSortable" : true,
                            "bAutoWidth" : true,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "授权人",
                            "bSortable" : false,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "已分配角色",
                            "bSortable" : true,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "管辖站点",
                            "bSortable" : true,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "创建时间",
                            "bSortable" : true,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "操作",
                            "bSortable" : true,
                            "sClass" : "text-center"
                        } ]
- 至于每列的设置,大家看名称应该知道是啥意思。但是我们的列并不是仅仅显示数据的。比如有的是要加超链接。有的并不是仅仅显示原始数据,需要进行加工处理的。这里我们需要一个加工函数,上面也提到了。
 
列数据二次加工
fnCreatedCell
- 方法就是多数据进行二次加工。
 
"fnCreatedCell" : function(nTd, sData, oData,iRow, iCol)
                            {
                                var value = oData[0];
                                var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="testCheckbox" onclick="recordMainId(this)" value="'+value+'" /><span></span></label>';
                                $(nTd).html(content);
                            }
其中值得一说的里面参数就是oData,oData就是所在行的所有列数据的集合数组。很有用的。比如你想去改行的第一列数据,直接oData[0]就取到了。在做修改删除很有用。
但是dataTable还通过另外一种方式对数据进行二次处理。就是通过
aoColumnDefs这个属性来指定具体列的数据加工。
[
                        {
                            "bSearchable" : true,
                            "bVisible" : false,
                            "aTargets" : [ 0 ]
                        },
                        {
                            "aTargets" : [ 3 ],
                            "mRender" : function(data,type, full)
                            {
                                var value=full[0];
                                return "<a href='' onclick='showUserInfo(\""+value+"\")' data-toggle='modal' data-target='#viewModal'>"+ data+ "</a>";
                            }
                        },
                        {
                            "aTargets" : [ 4 ],
                            "mRender" : function(data,type, full)
                            {
                                if(data==null)
                                {
                                    data="@@@"
                                }
                                var arr = data.split("@@@");
                                return "<a href='' data-toggle='modal' data-target='#viewModal' onclick='showUserInfo(\""+ arr[0]+ "\")' >"+ arr[1]+ "</a>";
                            }
                        },
                        {
                            "aTargets" : [ 8 ],
                            "mRender" : function(data,type, full) {
                                return "<a href='javascript;;' onclick=' return adminUpdate(this)' site='"+ full[6]+ "' id='"+ full[0]+ "' name='"+ full[2]+ "' data-toggle='modal' data-target='#myModalUpdate'>修改</a>     <a href='' data-toggle='modal' data-target='#deleteModal' onclick='return adminDelete(this)' id='"+full[0]+"' role='"+ full[5]+ "'>删除</a>";
                            }
                        } ]
这种方法缺陷就是需要我们指定列号,但是实际开发中我们的列号可能是会因为项目需求而改变的,所以这个方法不是很好,但是也能实现同样的效果。然后通过
mRender指定函数时间,里面的full和oData是一个数据效果。到这里数据显示及一些CURD操作基本就实现了。但是有的时候我们需要将表格加载数据是携带参数查询,这个时候我们除了在指定的请求上加,还有一种方法是在数据回调是处理的。通过
fnServerData属性,我们可以加条件参数传入后台。
// 服务器端,数据回调处理
                "fnServerData" : function retrieveData(sSource, aoData, fnCallback)
                {
                    aoData.push({
                        "name" : "user_name",
                        "value" : $('#user_name').val()
                    });
                    aoData.push({
                        "name" : "real_name",
                        "value" : $('#real_name').val()
                    });
                    aoData.push({
                        "name" : "create_user_name",
                        "value" : $(
                                '#create_user_name').val()
                    });
                    aoData.push({
                        "name" : "site_id",
                        "value" : $('#site_id').val()
                    });
                    aoData.push({
                        "name" : "fromTime",
                        "value" : $('#fromTime').val()
                    });
                    aoData.push({
                        "name" : "toTime",
                        "value" : $('#toTime').val()
                    });
                    $.ajax({
                        "type" : "POST",
                        "url" : sSource,
                        "dataType" : "json",
                        "contentType" : "application/json",
                        "data" : JSON.stringify(aoData),
                        "success" : function(data)
                        {
                            fnCallback(data);
                        }
                    });
                }
- 条件参数通过aoData.push方法加入。到这里前台table已经显示完了。我们在看看后台数据处理逻辑。
 
后台参数接收
- 前台我们指定的请求我们在后台对应的请求中加入如下参数。
 
- 前台中的aoData.push进来的参数及datatable自身关于分页等等的信息数据全是放在dataTableParams这个变量中。我们只需要将他转换成map就可以传入数据库操作了。
 
转map代码:
HashMap<String, String> paramsMap = new HashMap<>();
        for (DataTableParam dataTableParam : dataTableParams)
        {
            paramsMap.put(dataTableParam.getName(), dataTableParam.getValue());
        }
- 下面的操作我就不在细致说了,下面就是传入数据sql的操作了。
 
表格刷新
- 在实际中我们都需要不刷新页面只刷新页面中某个空间。datatable基于此需求专门提供了刷新表格的方法。在实际开发中我们改变了表中数据最后我们调用刷新的方法就行了
 
adminTable.draw();
使用dataTable常见问题汇总
- 这个问题基本上就是数据不匹配,这是因为我在前台
aoColumns中指定了7列,但是我们后台只穿回来6列的原因,只要少于7列都是这种错误。修改方法:去后台添加完整数据。就算某列时空也要加入,加入空字符串代替,因为前台是按顺序的加载数据的,所以没数据也要用空字符串占替位置。 
dataTable发展的版本很多,不同的版本里面的参数名可能不太一样,需要注意一下,有的版本加载table的请求地址是通过ajax属性来实现的。有的就是sAjaxSource属性实现的,只是名称不一样了而已。
完整DataTable加载样本
var adminTable= $('#adminTable').DataTable(
            {
                "bSort" : true,
                "bProcessing" : true,
                "bServerSide" : true,
                "async" : false,
                //"retrieve" : true,//保证只有一个table实例
                "bStateSave" : false,
                "sAjaxSource" : jQuery.getBasePath()
                        + "/adminManage/tableDisplay.bsh",
                "sDom" : '<"top"l<"clear">>rt<"bottom"ip<"clear">>',
                "lengthMenu" : [ 10, 25, 75, 100 ],
                "pageLength" : 10,
                "oLanguage" :
                {
                    "sProcessing" : "正在加载数据...",
                    "sSearch" : "搜索:",
                    "sLengthMenu" : "_MENU_条记录",
                    "sZeroRecords" : "没有查到记录",
                    "sInfo" : "第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
                    "sInfoEmpty" : "0条记录",
                    "oPaginate" :
                    {
                        "sPrevious" : "上一页 ",
                        "sNext" : " 下一页",
                    }
                },
                "aoColumnDefs" : [
                        {
                            "bSearchable" : true,
                            "bVisible" : false,
                            "aTargets" : [ 0 ]
                        },
                        {
                            "aTargets" : [ 3 ],
                            "mRender" : function(data,type, full)
                            {
                                var value=full[0];
                                return "<a href='' onclick='showUserInfo(\""+value+"\")' data-toggle='modal' data-target='#viewModal'>"+ data+ "</a>";
                            }
                        },
                        {
                            "aTargets" : [ 4 ],
                            "mRender" : function(data,type, full)
                            {
                                if(data==null)
                                {
                                    data="@@@"
                                }
                                var arr = data.split("@@@");
                                return "<a href='' data-toggle='modal' data-target='#viewModal' onclick='showUserInfo(\""+ arr[0]+ "\")' >"+ arr[1]+ "</a>";
                            }
                        },
                        {
                            "aTargets" : [ 8 ],
                            "mRender" : function(data,type, full) {
                                return "<a href='javascript;;' onclick=' return adminUpdate(this)' site='"+ full[6]+ "' id='"+ full[0]+ "' name='"+ full[2]+ "' data-toggle='modal' data-target='#myModalUpdate'>修改</a>     <a href='' data-toggle='modal' data-target='#deleteModal' onclick='return adminDelete(this)' id='"+full[0]+"' role='"+ full[5]+ "'>删除</a>";
                            }
                        } ],
                "aoColumns" : [
                        {
                            "sTitle" : "id",
                            "bSortable" : false
                        },
                        {
                            "sTitle" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" id="checkAll" onclick="adminChooseOrNoChoose(this)" /><span></span></label>',
                            "bSortable" : false,
                            "sClass" : "text-center",
                            "fnCreatedCell" : function(nTd, sData, oData,iRow, iCol)
                            {
                                var value = oData[0];
                                var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="testCheckbox" onclick="recordMainId(this)" value="'+value+'" /><span></span></label>';
                                $(nTd).html(content);
                            }
                        }, {
                            "sTitle" : "用户名",
                            "bSortable" : true,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "姓名",
                            "bSortable" : true,
                            "bAutoWidth" : true,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "授权人",
                            "bSortable" : false,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "已分配角色",
                            "bSortable" : true,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "管辖站点",
                            "bSortable" : true,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "创建时间",
                            "bSortable" : true,
                            "sClass" : "text-center"
                        }, {
                            "sTitle" : "操作",
                            "bSortable" : true,
                            "sClass" : "text-center"
                        } ],
                // 服务器端,数据回调处理
                "fnServerData" : function retrieveData(sSource, aoData, fnCallback)
                {
                    aoData.push({
                        "name" : "user_name",
                        "value" : $('#user_name').val()
                    });
                    aoData.push({
                        "name" : "real_name",
                        "value" : $('#real_name').val()
                    });
                    aoData.push({
                        "name" : "create_user_name",
                        "value" : $(
                                '#create_user_name').val()
                    });
                    aoData.push({
                        "name" : "site_id",
                        "value" : $('#site_id').val()
                    });
                    aoData.push({
                        "name" : "fromTime",
                        "value" : $('#fromTime').val()
                    });
                    aoData.push({
                        "name" : "toTime",
                        "value" : $('#toTime').val()
                    });
                    $.ajax({
                        "type" : "POST",
                        "url" : sSource,
                        "dataType" : "json",
                        "contentType" : "application/json",
                        "data" : JSON.stringify(aoData),
                        "success" : function(data)
                        {
                            fnCallback(data);
                        }
                    });
                }
            });
}
function initSelectTable()
{
    UserDataTable = $('#selectUserTable').DataTable(
    {
        "bSort" : true,
        "bProcessing" : true,
        "bServerSide" : true,
        "bStateSave" : false,
        /* "sScrollX": "100%",
        "sScrollXInner": "100%",
        "bScrollCollapse": true, */
        "bAutoWidth" : false,
        "sAjaxSource" : jQuery.getBasePath()+ "/userManage/getUserTable.bsh",
        "sDom" : '<"top"l<"clear">>rt<"bottom"ip<"clear">>',
        "lengthMenu" : [ 3, 20, 30 ],
        "pageLength" : 3,
        "oLanguage" : {
        "sProcessing" : "正在加载数据...",
        "sSearch" : "搜索:",
        "sLengthMenu" : "_MENU_条记录",
        "sZeroRecords" : "没有查到记录",
        "sInfo" : "第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
        "sInfoEmpty" : "0条记录",
        "oPaginate" :
        {
            "sPrevious" : "上一页 ",
            "sNext" : " 下一页",
        }
    },
    "aoColumnDefs" : [
        {
            "bSearchable" : true,
            "bVisible" : false,
            "aTargets" : [ 0 ]
        },
        {
            "aTargets" : [ 1 ],
            "mRender" : function(data,type, full)
            {
                return "<a href='' onclick='viewUser("+ full[0]+ ")' data-toggle='modal' data-target='#viewModal'>"+ data + "</a>";
            }
        },
        {
            "aTargets":[2],
            "mRender":function(data,type,full)
            {
              return "<a href='' onclick='showUserInfo(\""+full[0]+"\")' data-toggle='modal' data-target='#viewModal'>"+data+"</a>";
            }
        },
        {
            "aTargets" : [ 3 ],
            "mRender" : function(data,type, full)
            {
                if(data=="1")
                {
                    return "已认证";
                }
                else if(data=="2")
                {
                    return "未认证";
                }
                else if(data=="3")
                {
                    return "待认证";
                }
                else if(data=="4")
                {
                    return "已驳回";
                }
            }
        },
        {
            "aTargets" : [ 4 ],
            "mRender" : function(data,type, full)
            {
                if (data > 0)
                {
                    return "关闭";
                }
                else
                {
                    return "启用";
                }
            }
        } ],
    "aoColumns" : [
        {
            "sTitle" : "id",
            "bSortable" : false
        },
        {
            "sTitle" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" id="checkAll" onclick="chooseOrNoChoose(this)" /><span></span></label>',
            "bSortable" : false,
            "sClass" : "text-center",
            "fnCreatedCell" : function(nTd, sData, oData,iRow, iCol)
                            {
                                var value = oData[0]+"@@@"+oData[2];
                                var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="userCheckbox" onchange="recordUserId(this)" name="'+ oData[2]+ '" value="'+ value+ '" /><span></span></label>';
                                $(nTd).html(content);
                            }
        },
        {
            "sTitle" : "用户名",
            "bSortable" : true,
            "sWidth" : "120px",
            "sClass" : "text-center"
        },
        {
            "sTitle" : "实名认证",
            "sWidth" : "90px",
            "bSortable" : true,
            "sClass" : "text-center"
        },
        {
            "sTitle" : "状态",
            "sWidth" : "90px",
            "bSortable" : false,
            "sClass" : "text-center"
        },
        {
            "sTitle" : "所属站点",
            "bSortable" : false,
            "sWidth" : "180px",
            "bAutoWidth" : true,
            "sClass" : "text-center"
        } ],
    // 服务器端,数据回调处理
    "fnServerData" : function retrieveData(sSource, aoData, fnCallback)
    {
        aoData.push({"name" : "userName","value" : $("#selectUserName").val()});
        aoData.push({"name":"site","value":$("#site").val()});
        /*aoData.push({"name":"end","value":$("#end").val()});
        aoData.push({"name":"realName","value":$("#realName").val()});
        aoData.push({"name":"status","value":$("#status").val()});
        aoData.push({"name":"site","value":$("#site").val()}) */
        $.ajax({
            "type" : "POST",
            "url" : sSource,
            "dataType" : "json",
            "contentType" : "application/json",
            "data" : JSON.stringify(aoData),
            "success" : function(data)
            {
                fnCallback(data);
            }
        });
    }
    });
}
function initRoleTable()
{
    RoleDataTable = $('#selectRoleTable').DataTable(
    {
        "bSort" : true,
        "bProcessing" : true,
        "bServerSide" : true,
        "bStateSave" : false,
        /* "sScrollX": "100%",
        "sScrollXInner": "100%",
        "bScrollCollapse": true, */
        "bAutoWidth" : false,
        "sAjaxSource" : jQuery.getBasePath()+ "/adminManage/roleList.bsh",
        "sDom" : '<"top"l<"clear">>rt<"bottom"ip<"clear">>',
        "lengthMenu" : [ 3, 20, 30 ],
        "pageLength" : 3,
        "oLanguage" : {
        "sProcessing" : "正在加载数据...",
        "sSearch" : "搜索:",
        "sLengthMenu" : "_MENU_条记录",
        "sZeroRecords" : "没有查到记录",
        "sInfo" : "第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
        "sInfoEmpty" : "0条记录",
        "oPaginate" :
        {
            "sPrevious" : "上一页 ",
            "sNext" : " 下一页",
        }
    },
    "aoColumnDefs" : [
    {
        "bSearchable" : true,
        "bVisible" : false,
        "aTargets" : [ 0 ]
    },
    {
        "aTargets" : [ 1 ],
        "mRender" : function(data,type, full)
        {
            return "<a href='' onclick='viewUser("+ full[0]+ ")' data-toggle='modal' data-target='#viewModal'>"+ data + "</a>";
        }
    } ],
    "aoColumns" : [
    {
        "sTitle" : "id",
        "bSortable" : false
    },
    {
        "sTitle" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" id="checkAll" onclick="roleChooseOrNoChoose(this)" /><span></span></label>',
        "bSortable" : false,
        "sWidth" : "70px",
        "sClass" : "text-center",
        "fnCreatedCell" : function(nTd, sData, oData,iRow, iCol)
        {
            var value = oData[0]+"@@@"+oData[2];
            var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="roleCheckbox" onchange="recordRoleId(this)" name="'+ oData[2]+ '" value="'+ value+ '" /><span></span></label>';
            $(nTd).html(content);
        }
    },
    {
        "sTitle" : "用户名",
        "bSortable" : true,
        "sWidth" : "120px",
        "sClass" : "text-center"
    },
    {
        "sTitle" : "创建时间",
        "bSortable" : false,
        "sWidth" : "180px",
        "bAutoWidth" : true,
        "sClass" : "text-center"
    } ],
    // 服务器端,数据回调处理
    "fnServerData" : function retrieveData(sSource, aoData, fnCallback)
    {
        aoData.push({"name" : "sname","value" : $('#selectRoleName').val()});
        /*aoData.push({"name":"start","value":$("#start").val()});
        aoData.push({"name":"end","value":$("#end").val()});
        aoData.push({"name":"realName","value":$("#realName").val()});
        aoData.push({"name":"status","value":$("#status").val()});
        aoData.push({"name":"site","value":$("#site").val()}) */
        $.ajax({
            "type" : "POST",
            "url" : sSource,
            "dataType" : "json",
            "contentType" : "application/json",
            "data" : JSON.stringify(aoData),
            "success" : function(data)
            {
                fnCallback(data);
            }
        });
    }
    }); 
Javaweb表格加载---DataTable的更多相关文章
- 【转载】ansys中压力随时间变化的表格加载方法
		
原文地址:http://wenku.baidu.com/link?url=w9k94Upqbok0SUNU3L7LOLRDLUtP7W_KyQWK68ajK_nEbO00mO6hzbuBQ01rS07 ...
 - 从excel表格加载数据返回DataSet
		
添加命名空间:using System.Data.OleDb; /// <summary> /// 从excel表格加载数据返回DataSet /// </summary> / ...
 - BootStrap的表格加载json数据,并且可以搜索,选择
		
2018.4.11日更新,8号的时候我推荐去官网下载,但是那个版本不知道为什么我无法使用 $table.bootstrapTable('getSelections'); 无论如何...然后我尝试着更换 ...
 - DHTMLX 前端框架 建立你的一个应用程序 教程(六)-- 表格加载数据
		
从数据库加载数据 这篇我们介绍从MySQL数据库中加载数据到表格 我们使用 MySql的数据库dhtmlx_tutorial 和表contacts 示例使用的是PHP平台和dhtmlxConnecto ...
 - bootstrap-table 表格加载中....处理
		
$('#table').bootstrapTable({data:[]}); $('#table').bootstrapTable("showLoading"); ajax数据加载 ...
 - javaWeb项目加载HTML文件时报错  [No Find  /index.html]
		
直接上主题: 在web.xml文件中添加如下信息: <display-name>Spring MVC Application</display-name> <servle ...
 - [转]bootstrap的table插件动态加载表头
		
原文地址:https://blog.csdn.net/abubu123/article/details/78060321 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表 ...
 - jQuery实现加载中效果,防止重复提交
		
//导出表格加载中的提示var dian=0;//控制'●'的个数var t=null;//停止时使用function id_loadspot(loadspotSpan,loadingDiv,expo ...
 - bootstrap table插件动态加载表头
		
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
 
随机推荐
- 页面的隐藏或显示:hidden与visibilityState
			
我们在很多地方都需要判断用户是不是在当前页面,如果离开了当前页面我们需要捕捉到并进行一些操作. 例如:当视频处于播放状态时,我们需要判断用户是不是在当前页面以继续播放,如果离开了我们需要暂停播放. 有 ...
 - 网络下载器 迅雷大众版 v7.9.42.5050 精简绿色版
			
下载地址:点我 基本介绍 迅雷大众版是一款采用了先进的超线程技术基于网格原理,能够将存在于第三方服务器和计算机上的数据文件进行有效整合,通过这种先进的超线程技术,用户能够以更快的速度从这些第三方节点平 ...
 - Node热部署插件
			
一.supervisor 首先需要使用 npm 安装 supervisor(这里需要注意一点,supervisor必须安装到全局) $ npm install -g supervisor Linux ...
 - Unix及Linux编辑器vi/vim基本使用方法
 - 三个标签完成springboot定时任务配置
			
1. 问题描述 Java项目定时任务是必备模块,月高风黑夜跑个批处理,记录或者统计一些系统信息. 2. 解决方案: 结合springboot,只需三个标签就能完成定时任务配置. 2.1 标签1 用在s ...
 - React躬行记(8)——样式
			
由于React推崇组件模式,因此会要求HTML.CSS和JavaScript混合在一起,虽然这与过去的关注点分离正好相反,但是更有利于组件之间的隔离.React已将HTML用JSX封装,而对CSS只进 ...
 - 一个简单的EJB例子
			
转载自 http://blog.sina.com.cn/s/blog_678530f60100hvwy.html 声明:这个Converter的例子应该是J2EE 1.4 Tutorial上面的.不过 ...
 - [WPF自定义控件库]了解WPF的布局过程,并利用Measure为Expander添加动画
			
1. 前言 这篇文章介绍WPF UI元素的两步布局过程,并且通过Resizer控件介绍只使用Measure可以实现些什么内容. 我不建议初学者做太多动画的工作,但合适的动画可以引导用户视线,提升用户体 ...
 - 最好的导航分割栏,分割线,实现底部透明,纯css
			
<div class="Ui_Ct_Line padding_5"> <div>为您推荐</div> </div> .Ui_Ct_L ...
 - Excel催化剂开源第1波-自定义函数的源代码全公开
			
Excel催化剂插件从2018年1月1日开始运营,到今天刚好一周年,在过去一年时间里,感谢社区里的许多友人们的关心和鼓励,得以坚持下来,并收获一定的用户量和粉丝数和少量的经济收入回报和个人知名度的提升 ...