【bootstrap组件】几个常用的好用bs组件

　　这次开发了个小TRS系统，虽然是很小，但是作为初心者，第一次用到了很多看起来洋气使用起来有相对简单的各种前端（主要是和bootstrap配合使用）组件。包括bootstrap-select2，bootstrap-datetimepicker，bootstrap-fileinput等。本文就旨在记录一些这些组件相关的内容

【bootstrap-select2】

　　官方文档：【https://select2.org/options】

　　这个组件主要用于优化等页面组件。比如我们想要在下拉菜单的顶部加上一个搜索框支持我们对选项进行搜索，抑或是在多选下拉菜单中我们要有那种类似于tag形式的表现，用这个组件就很好了。首先是这个组件需要在页面中进行引入的文件：

<link href="{% static 'select2/dist/css/select2.min.css' %}" rel="stylesheet" />

<script src="{% static 'select2/dist/js/select2.min.js' %}">script>
<script src="{% static 'select2/dist/js/i18n/zh-CN.js' %}">script>

　　zh-CN.js是语言翻译文件，需要注意引入必须在select2.min.js后面，否则会报错。这一点也适用于绝大多数支持国际化显示的组件。

　　当然因为是bootstrap的组件，自然是不能少bootstrap的js和css以及支持bootstrap的jquery了，这个就不写出来了。

■　　带静态搜索框的下拉菜单

　　所谓静态搜索框，就是指这个下拉菜单里所有的option都是在页面渲染时就已经固化好了的，用这个搜索框进行搜索时不会动态发请求到后台去取数据。这个搜索框的HTML可以这么写：

<select id="static_dropdown" class="form-control">
    <option>1option>
    <option>2option>
    <option>3option>
select>

　　这就是一个普通的select，只不过需要有form-control这个class和一个用于后续表示用的id。

　　然后在js中这么写：

$('#static_dropdown').select2({
    language: 'zh-CN',
    width: '100%',
    placeholder: '请选择',
    minimumInputLength: 10
});

　　利用前端组件一个非常重要的内容就是把握初始化时各个初始化参数的含义。通过对不同参数发出调整来搞出一个符合自己需求的组件。

　　这里用到的四个参数，language显而易见是国际化显示用的。width指出了这个select的宽度，placeholder就是placeholder...，minimunInputLength指出了在搜索时至少要输入多少字符才会给出响应的搜索结果。如果待选项不是太多的话尽量不要设置过大的值，像示例的10，我觉得是很大的一个值了。。

　　下面也会零散性地给出一些参数说明：

　　selectOnClose　　当设置成true时，当收起菜单时的高亮项会自动被选择，如果是false则不会自动选择。

　　dropdownParent　　可以指定下拉菜单在html代码中的位置。默认情况下，下拉菜单都是被append到body中，并且被设置成position:absolute，且位置在select的下方。而设置这个参数比如dropdownParent: $('#myModal')，就可以将下拉菜单放入一个指定的容器中。

　　tags　　把tags设置成true了之后，在搜索时即便没有搜索到相关内容，也会把你输入的内容当成一个可选项。之所以被称为tags，就是因为tags这个东西不一定要都是既存的，可以有非既存而我们自己添加的情况。

　　placeholder　　如果值是一个字符串那么就是一个简单的placeholder，如果换成一个对象也可以，即为菜单添加一个默认的选项。比如placeholder: {id:-1,text:'--请选择--'}

　　tokenSeparators　　可以设置成一个包含各种字符的列表如[',',' ']，常和tags以及多选菜单配合使用。即自己输入时，输入逗号或空格（看你这个参数设置的情况）时认为是一个tag的终结，就把前面的内容作为一个新tag添加到多选框里面。

　　createTag　　这个参数的值也是一个函数对象。这个函数接受一个参数param，其结构是这样的

　　我们主要关注term这一项的值，我们可以在createTag指定的函数中对term进行一些逻辑判断和处理，然后返回一些结果来让添加标签的过程更加智能化一些。比如：

$('#testselect').select2({
    createTag: function(param){
        var term = $.trim(param.term);
        if (term.indexOf('@') == -1){
            return null;
        }
        else {
            var id = term.split('@')[0];
            var text = term.split('@')[1];
            return {id:id,text:text};
        }
    }
});

 

　　在用户输入自定义的tag的时候可以检查存不存在@，如果不就不允许其增加这个tag，如果存在则@前面的部分作为value，后面的部分作为

的text，加入一个新的tag。

　　minimunResultsForSearch　　通常这个参数设置成一个整数，当option的待选数量大于这个数字时才显示搜索框。当把这个参数设置为Infinity时将默认不显示搜索框。这样select就变成了一个simple的select了。

　　maximumSelectionLength　　若是多选框，设置最多可以选择几项

　　另外，可以在select和option中引入一层optgroup标签并设置其label属性。optgroup可以为所有选项划分出合适的组分并且显示以label的标签。将option的disabled设置为disabled还可以禁止选择某一个选项。

 

　　●  带有图片的下拉菜单

　　上面的说明，得到的下拉菜单都是纯文字的。其实select2支持我们传递图片进去作为每个选项的一个修饰。这里就要用到templateResult这个参数。

　　首先要明确，我们虽然在html上写的是select和option，但是最终经过select2的加工呈现出来的是ul和li，每个li里面是当时option中的内容。在了解这一点的基础上，我们的templateResult参数是一个函数对象。这个函数对象接受一个object（这个object八成是select2内部定义的抽象了菜单选项的object）为参数并且返回字符串或jquery对象供select2渲染成菜单选项。简单来说，就是select2会对所有选项进行一个遍历，依次执行一下这个函数然后按照我们定义的方式渲染出我们想要的菜单选项的样式和内容。比如下面这样：

templateResult: function(row){
    return $(''+row.text+'');
}

　　上面这个函数有点绕，简单来说就是可以把/static/img/<每个option设置好的value值>.png作为标识图片放在option的旁边。如果在这个函数中断点看下row的具体情况的话，就可以看到其实这个row的结构是这样的：

Object { selected: false, disabled: false, text: "张三", id: "10001", title: "", _resultId: "select2-addTrainSpeaker-result-5o5i-10001", element: option }

　　也就是说我们的option的value在这里是id，option的字符串在这里是text，这样就可以根据value和字符串来定制了。顺便一提，上面的函数中return要加上$()是因为不这样返回的默认是字符串，也就是每一项的内容都会变成xxxx的样子而不是html内容。所以返回jquery对象比较靠谱。

 

■　　tag形式的多选框

　　所谓tag形式的多选框就是指这种：

　　这个看起来比较复杂，其实也通过select2实现也比较方便。html可以这么写：

<button class="close" type="button" id="multiple_all">+button>
<select class="form-control" id="multiple_choice" multiple="multiple">
    <option value="1">aoption>
    <option value="2">boption>
    <option value="3">coption>
select>

　　然后在js中这样写：

var multiple = $('#multiple_choice').select2({
    placeholder: '请选择',
    allowClear: true
});

$('#multiple_all').click(function(event){
    event.preventDefault();
    var res = [];
    $(this).next('select').find('option').each(function(i,ele){
        res.push($(ele).val())
    });
    $(multiple).val(res).trigger('change');
});

 　　第一部分很好理解，和上面的下拉菜单一样，也是初始化。只是这个初始化返回了一个jquery对象，我们先用multiple这个变量保存下来。然后当select前面的那个按钮被点击时，就是执行了第二部分代码，是将select中所有选项的值都加入到一个数组中，然后把这个数组传递给刚才那个multiple对象的val方法，再trigger一下change事件。这样就可以自动地选择所有选项到多选框里面了。（这部分是我自己加上去，不是select2要求的）。

　　可以看出来$(multiple).val(xxx).trigger('change')就是拿来引发多选框被选中值变化的方法。如果xxx处填写null那么就是清空多选框了。

　　关于如何取值，类似的我们可以$('#multiple_choice').val()来取值，得到的应该是一个数组。这里多提一句，如何通过ajax传递数组给后台。直接写入ajax方法的data字段需要特殊处理过的数组。比如我们有数组对象array想要作为参数parti的值通过ajax传递出去的话，那么可以先JSON.stringify(array)，得到的json化的字符串再拿来传递即可。在后台我们只要用相关后台的方法来解析json格式字符串即可。

■　　编程控制

　　上面提到了如何一键清空或全选多选框的选项、这个其实是一个select2组件的编程控制。更一般地来说我们可以这样给下拉菜单多增加一个选项：

var data = {
  id: 1,
  text: 'test'
};

var newOption = new Option(data.text,data.id,false,false);
$('#testselect').append(newOption).trigger('change');

 

　　如果是选取若干个可以传递一个数组给val方法。如果需要对待加入项是否已经存在做出判断的话可以这么做：

if ($('#testselect').find('option[value='+data.id+']').length){
    $('#testselect').val(data.id).trigger('change'); //如果已经存在则不添加而是选择那一项
}
else{
    var newOption = new Option(data.id,data.text,true,true);
    $('#testselect').append(newOption).trigger('change');
}

 

 

■　　动态搜索下拉菜单

　　所谓动态，即每次搜索框中数据发生变化时，前端会向后台发送ajax请求来获取一些数据，把这些数据用于填充下拉菜单的内容。实现方法是在初始化select2组件的时候加入ajax参数，如：

$('#testselect').select2({
    ajax : {
        url: '/api',
        dataType: 'json',  //比较重要，没有的话返回json数据会无法识别，搜索失败
        data: function(param){
            return {
                keyword: param.term,
                searchType: 'public',
                page: param.page || 1
            }
        }
    }
})

 

 

　　ajax参数的值是一个object，包括url等key。url这个肯定是要有的，指出了ajax请求发往什么地方。data参数是可选的，在默认情况下select2发出的请求包含了以下几个参数：
　　term　　此时搜索框中的内容

　　q　　和term内容一样

　　_type　　通常是query，如果涉及到结果分页时可能不一样

　　page　　当有结果分页时有此参数，指出当前分页

　　在设置data参数之后，data参数的值是一个获取当前搜索框中对象（具体搜索内容是其term参数）并返回一个object作为ajax参数的函数对象，我们可以借此来定义一些自定义的请求参数字段。

　　需要特别说明的是，这里的ajax请求默认是get方法，目前还没找到如何改成post的办法。

　　因为前端会自动对后端传递过来的数据进行适应select2组件的渲染，所以其对于数据的格式肯定是有要求的。具体的要求是这样的：

{
    results: [
        {id: '10001', text: 'Option_1'},
        {id: '10002', text: 'Option_2'},
        //等等，这部分就是主要的数据
    ],
    pagination: {
        more: true
    }
}

 

　　主要数据部分每个列表项都是一个object且包含id和text两个字段分别用来填充option标签对应的那两个字段。pagination则是指出了前端会对上送的结果做一个分页处理，即一次性只在下拉列表中显示有限个项，但在最下方有一个“显示更多项”，当滚动条到最下方时再自动发送请求去调取下一个分页的数据。当然，顺利地实现分页需要前端发出的ajax请求中带有param.page这个信息（如上上面的代码所示），然后后端也要根据上送上来的page的值来进行相应数据段的返回。前后端协调了才可以给出比较好的分页效果。

　　上面的说明中可以看得出对数据格式要求比较严格（results,pagination,id,text等字段都不能自定义），为了适应更加多样化的形式的数据，我们可以在ajax参数中再加上一个processResults字段：

$('#testselect').select2({
    ajax: {
        url: '/api',
        dataType: 'json',
        data: function(param){
            return {
                kw: param.term,
                page: param.page || 1
            };
        },
        processResults: function(data){
            return {
                results: data.items
            };
        }
    }
})

 

　　上面的示例虽然有了分页，不过还有个小瑕疵，就是即使加载完了所有数据，最下面的加载所有数据依然会存在而不消失。这个问题可以在前端解决，官方文档中给出的示例是这样的：

processResults: function(data,params){
    params.page = params.page || 1;
    return {
        results: data.results,
        pagination: {
            more: (params.page * 10) < data.total_count
        }
    };
}

 

　　首先，返回的结果中多了一个total_count字段，它指出了未分页时结果集的个数。注意是未分页时，即搜索条件不变时不论page是多少这个字段的值是不变的。然后在后端返回中的pagination字段可以去掉了，因为这个字段通过前端的逻辑判断来置true或false，这个条件，就是上面写着的当前页面*10是否小于总条数（也就是一次显示10条）。若否，表明已经加载到了最后一页，此时pagination就可以是false，即不需要再显示“加载更多数据”了。

　　●  更多ajax参数

　　delay　　可以在ajax的参数中加上delay，取值单位是毫秒。意思是说当用户停止输入了这么多毫秒之后再发出ajax请求。用户每改动一个字母就发出一次请求显然是比较浪费资源的，这么做更加合理一些。

 

【bootstrap-datetimepicker】

　　datetimepicker是一个比较方便的日期时间插件。有了这个之后，我们可以在类似于表单的地方提供一个友好的日期（时间）输入功能。官方文档：【http://www.bootcss.com/p/bootstrap-datetimepicker/】

　　要使用datetimepicker组件，首先引入一些文件：

<link href="{% static 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">

<script src="{% static 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}">script>
<script src="{% static 'bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}">script>

 

　　同样这里没有写出来bootstrap的css和js以及jquery，但都是也要包含的。

　　■　　典型应用：

　　HTML写成这样：

<div class="input-group date">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar">span>
    span>
div>

 

　　然后在js中这样写：

var today = new Date();
var format_td = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
$('.input-group.date').datetimepicker({
    format: 'yyyy-mm-dd hh:00',
    language: 'zh-CN',
    todayBtn: 'linked',
    maxView: 3,
    minView: 1,
    autoClose: true,
    minuteStep: 30,
    startDate: format_td,
    pickerPosition: 'bottom-right'
});

 

　　我们就可以在页面上得到一个输入框（type还是text的，不是date或者datetime），然后这个输入框右边会带有一个日历图标（input-group-addon），然后点击输入框或日历时会跳出一个日历来供用户选择具体的日期时间。选择完成后输入框中会出现特定格式的时间字符串，供表单提取数据或其他用。

　　下面来解释一下在这个初始化过程中，各个参数的含义：

　　format　　指出了最后在输入框中的字符串的样式，上面这个yyyy-mm-dd hh都是格式化字符串，对应于类似"2017-01-01 08"（2017年1月1日上午8时）这样子。而:00是我固定写死的。更多的还有hh:ii:ss表示精确到秒的时间格式等，至于两位年份，一位小时数等等可以去官方文档看格式化字符串的写法。

　　language　　国际化显示适应，需要引入bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js才可顺利显示中文。

　　todayBtn　　可以设置为true,false或者'linked'。让日历组件下方有一个“今天”按钮。说是“今天”，其实应该是“现在”，如果是true则点击后跳转到当前日期；如果是'linked'则点击时自动选中当前时间日期并且写入输入框

　　maxView,minView　　日历组件可以根据需要分成好多不同的维度来看，这两个参数用来控制用户能够到达的最宏观和最微观的维度。值的各个数字的含义是：0-小时；1-天；2-月；3-年；4-十年。其默认值分别是0和4。另外还有startView参数用来指出点击调用日历控件时默认显示的维度。默认值是2

　　autoClose　　当选择一个日期后关闭此日历控件

　　minuteStep　　控制分钟选择的粒度。在时间下面，我们还可以选择具体到多少分钟。比如点击14:00，这个值是30的话，我们能够点击14:00和14:30

　　startDate,endDate　　分别指出该日历能够选择的最早和最晚日期。从上面的代码中也可以看出来其取值是个yyyy-mm-dd格式的字符串。实际上也可以是个Date对象，也就是说这里写new Date()也完全可以。另外提一下，Date对象getMonth的值是从0开始到11的，getFullYear才是获取4位数年份的方法。

　　pickerPosition　　指出日历控件出现相对于输入框的位置，默认值就是bottom-right,也可以top-left之类的

　　daysOfWeekDisabled　　一个数组，指出一个星期的星期X不能被选择。需要注意的是这里day是西方那一套，也就是如果值是[0,6]就可以把周末都disabled掉，而非[6,7]。

　　初始化参数就说这么多吧，更多的可以参考文档

 

　　■　　编程控制和方法

　　datetimepicker方法不仅可以用于初始化控件，还可以在初始化完成之后，传入不同的参数来实现不同的编程控制。比如：

$('#testdp').datetimepicker('show')  //显示日历
$('#testdp').datetimepicker('hide')  //隐藏日历
$('#testdp').datetimepicker('update')  //将输入框中的日期字符串解析并反映到日历汇总

$('#testdp').datetimepicker('setStartDate','2017-01-01')  //或者null，用来设置日历最早可选日期
/*类似的很多参数也可以这么设置
比如
setEndDate
setDaysOfWeekDisabled
...
*/

 

　　■　　事件

　　datetimepicker留出了一些事件的接口供我们调用比如

　　show ， hide ， changeDate，changeYear，changeMonth这些都一目了然

　　outOfRange　　当用户试图在日历上选择超出了我们设置的范围（由startDate,endDate,daysOfWeekDisabled等决定）的日期时触发的事件

 

　　嗯 datetimepicker基本上就是这样了，没有什么很复杂的地方

 

【bootstrap-fileinput】

　　这是个据传最好用的bootstrap相关联的文件上传控件，支持拖曳上传，多线程上传，上传文件预览等等功能。

　　首先还是说一下要引入的一些文件：

<link href="{% static 'bootstrap-fileinput/css/fileinput.min.css' %}" rel="stylesheet" />
<script src="{% static 'bootstrap-fileinput/js/fileinput.min.js' %}">script>
<script src="{% static 'bootstrap-fileinput/js/locales/zh.js' %}">script>

 

 

　　同样也需要jquery和bootstrap的支持。

　　■　　基本使用

　　HTML：

<label class="control-label" for="testfile">上传文件label>
<input type="file" id="testfile" name="test" multiple />

 

　　JS：

$('#testfile').fileinput({
    language: 'zh',
    uploadUrl: location.pathname + 'upload/',
    showCaption: true,
    showUpload: true,
    showRemove: true,
    showClose: true,
    layoutTemplates:{
        actionDelete: ''
    },
    browseClass: 'btn btn-primary'
});

 

　　通过这样的初始化得到的上传组件大概是这样子的：

我们姑且把显示一个个文件的虚线区域称为文件区，每个文件标识称为文件缩略图

　　然后来解释一下各个参数的含义：

　　language指出国际化显示的语言环境，需要locales下面响应的js文件的支持；uploadUrl指出了点击上传之后会将上传文件的这个post请求发向哪个url。（uploadUrl这个参数其实还牵扯到了fileinput支持的两种不同的上传方式——form上传和ajax上传，在配置了uploadUrl时默认就是选择了ajax上传方式。fileinput对于ajax方式的上传支持更好，而拖曳上传等功能也只有在ajax上传方式中才奏效。关于具体的两种上传方式的区别后面再说，现在先默认所有操作都是基于ajax方式上传来做的。）

　　showCaption　　默认true，设置为false时将不显示下面那个类似于input[type=text]那样的显示框（然而这个显示框并不能直接编辑，它只是显示了文件名等信息）

　　showUpload　　默认true，设置为false是不显示右下角那个上传按钮

　　showRemove　　默认为true，设置为false时不显示右下角移除按钮

　　showClose　　默认为true，设置为false时不显示右上角的小叉（这个叉的作用就是移除当前所有文件区中的文件）

　　以上这些都是一些非文件区内的显示调整

　　layoutTemplates和文件缩略图的样式相关，暂且先不谈

　　browseClass指出了右下角选择按钮的样式。一般尽量不要用btn-sm和btn-lg，会和左边的输入框不协调。

　　●  更多初始化参数

　　showPreview　　默认true，设置为false时默认不显示整个文件区，自然就无法拖曳文件进行上传了。

　　showCancel　　默认true，只在ajax上传模式中可用，在上传过程中右下角有一个取消按钮，可以取消上传

　　showUploadedThumbs　　默认为true，这个属性是基于这样一个使用方法的：选择若干个文件后点击右下角上传按钮批量上传，待全部完成后再选择一批文件，此时之前上传成功的文件是否要保存。就是这个属性控制的。注意，点击文件缩略图下面的上传按钮不会导致之前的成功上传的文件消失，即使这里设置了true

　　showBrowse　　fileinput支持部分文件格式（如各种图片格式，txt，pdf等）的预览，点击缩略图的右上角按钮即可，这个就是控制是否显示这个按钮的。

　　autoReplace,maxFileCount　　这两个属性配合一起使用，即可以设置一个文件区存放的最多文件的数量，当要处理的文件个数超过这个数量时自动只选取最后的那几个进行展示和处理。

　　captionClass/previewClass/mainClass/frameClass　　这四个class参数可以为各自部分增加一些class属性、mainClass针对元素.file-caption-main，frameClass针对每个缩略图的框架。

　　initialPreview　　通过这个参数，我们可以为文件区设置一些默认的缩略图。通常可以用于一些附带的默认要上传的文件。参数的值写html代码即可，不过为了和其他部分统一，我们要用file-preview-image,file-preview-text等fileinput预设的class。代码实例可以参考官方文档【http://plugins.krajee.com/file-input/plugin-options#initialPreview】。事实上，initialPreview这一块内容是很丰富的，也有很多很多相关的参数可以使用。这个主要是用于当需要直接从后端读取一些文件数据展示给前端，并且允许前端进行新增或删除操作时使用。这种场景其实已经超越了普通的文件上传表单的意义了。就不详细叙述。等到要用的时候再研究吧

　　

　　●  layoutTemplates

　　这个参数内容也比较多，所以单独拿出来说一下。这个参数的值应该是一个object，而object中的各个键值对指出了一个整个fileinput组件的各种样式。上面的基本应用示例中的actionDelete其实就是指缩略图上的删除按钮。如像我一样设置成了''（空值），则文件缩略图上就不会显示删除按钮了。从观念上来说，我们可以把各个键值对的值看成是一个模板性质的东西，改变相应的模板自然就可以渲染出相应的内容了。

　　既然有模板，那么肯定就有模板变量和有一定语法的模板语言。fileinput里面有一种叫做tag的机制，即在模板中会出现类似{variable}的变量，可以被具体内容替换。而模板之间是可以嵌套的。比如layoutTemplates.footer中有{actions}这个变量：

    footer: '
\n' +
        '    
{caption}
\n' +
        '    {progress} {actions}\n' +
        '
',

 

，其内容是actions模板，而这个模板中又含有{upload}，{download}等变量：

    actions: '
\n' +
        '    
\n' +
        '        {upload} {download} {delete} {zoom} {other}' +
        '    
\n' +
        '    {drag}\n' +
        '    
{indicator}
\n' +
        '    
\n' +
        '
',

 

有了模板机制，可以让我们自由地选择再哪个层面的组件上进行模板的修改，然后模板系统会自动将这种改变传递给所有长辈模板，非常方便。因为我们不设置layoutTemplates参数也能渲染出一个界面来，说明这些模板中的所有变量（递归到最底层）都是有默认值的，这些默认值可以在这里看到：【http://plugins.krajee.com/file-input/plugin-options#layoutTemplates】。同时在修改模板时也要注意，除非有十足的把握，否则应该尽量不动这个模板中原本就有的那些变量。如果在改后的模板中少写了某个变量，就意味着这个变量指代的内容将不会被体现出来。

　　上面示例中给出的actionDelete相对还是比较低层级的模板，下面我们从高到低梳理一下各个层级的模板，部分模板没有变量，表明其是一个相对独立的模板：

　　main1　　带有caption的渲染模板

　　main2　　不带caption的渲染模板

　　preview　　文件区的渲染模板

　　fileIcon　　caption中在文件名前面那个图标，默认glypyhicon-file

　　caption　　caption的渲染模板

　　modal　　modal的渲染模板（这个模态对话框在预览文件内容时出现）

　　progress　　进度条的渲染模板，包括总进度条和每一个缩略图中进度条

　　size　　含有{sizeText}变量，文件缩略图中文件大小部分信息的渲染模板

　　footer　　含有{actions}变量等。

　　actions　　含有{upload}、{download}、{delete}等变量，这三个变量分别代表了actionUpload,actionDownload和actionDelete三个模板的内容。

　　以actionDelete为例：

　　　　actionDelete里面还有removeClass，removeIcon，removeTitle等变量。这三个变量比较特殊，是在fileActionSettings里面进行设置的。

　　

　　内容还有很多很多。。。我不想写了。总之就是看文档看文档

　　还有一个previewTemplates，是文件预览界面跳出来的模态框的样式设置， 不多说了。。

 

　　●   好的，继续来看其他的初始化参数

　　previewSettings　　这个参数可以为不同类型的文件设置预览时不同的CSS，同这个系列的也还有很多

　　allowedFileTypes　　一个数组，指出哪些类型的文件才是被接受上传的，尽量不要同时设置allowedFileTypes和allowedFileExtensions两个参数

　　allowedFileExtensions　　一个数组，指出带有哪些后缀名的文件才是被接受上传的，设置msgInvalidFileExtension可以个性化出现此错误时的错误信息

　　previewFileIcon　　当文件无法被预览时出现在缩略图中的图标，默认是

       previewFileIconSettings　　可以将不同的后缀的文件有不同的缩略图图标

　　uploadExtraData　　刚才说过，如果使用ajax上传的话，可以设置这个属性来上传一些其他的数据。这个是一个object。

　　minFileSize/maxFileSize　　指出上传支持的最小/最大的文件大小，同时可以设置msgFileTooSmall和msgFileTooLarge个性化报错信息

　　minFileCount/maxFileCount　　指出上传最少/多几个文件，若设置成0则表示没有限制。默认是0

　　msgPlaceholder　　默认是Select {files} ，代表了caption中的placeholder。如果是中文环境最好改一下，因为Select这个是没办法自己消除的。

　　msgFileRequired　　当要求文件但是没上传时的报错信息

　　关于msg的还有很多参数比如太多太少，太大太小，没找到文件，文件不可读等等，不一一列举。

　　dropZoneEnabled　　是否有拖曳文件上传区，和showPreview的区别在于，上传之后用户还是能看到文件缩略图，只是单纯不能拖曳上传了。

　　

　　●  fileActionSettings

　　最上面的那些show都是在缩略图外面的，现在来说说缩略图里面的一些东西要怎么控制显示隐藏：

　　showUpload，showDownload，showRemove，showZoom等就不说了

　　showDrag　　显示拖动按钮（只适用于initialPreview的部分）

　　uploadIcon/uploadTitle/uploadClass　　上传按钮相关的属性

　　download/remove/drag/zoom也有上面这三个

　　

　　篇幅有些过长了。。关于fileinput的方法、事件以及两种上传方法的比较另开一片写

 

　　

　　

　　

 

你可能感兴趣的:(【bootstrap组件】几个常用的好用bs组件)

• 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
  很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
• OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
  前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
• element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
  el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
• 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
  理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
• 学点心理知识，呵护孩子健康 静候花开_7090
  昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
• 扫地机类清洁产品之直流无刷电机控制 悟空胆好小 清洁服务机器人单片机人工智能
  扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
• ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
  我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
• 每日一题——第九十题 互联网打工人no1 C语言程序设计每日一练c语言
  题目：判断子串是否与主串匹配#include#include#include//////判断子串是否在主串中匹配//////主串///子串///boolisSubstring(constchar*str,constchar*substr){intlenstr=strlen(str);//计算主串的长度intlenSub=strlen(substr);//计算子串的长度//遍历主字符串，对每个可能得
• Python数据分析与可视化实战指南 William数据分析 pythonpython数据
  在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
• 利用LangChain的StackExchange组件实现智能问答系统 nseejrukjhad langchainmicrosoft数据库python
  利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
• 想明白这个问题，你才能写下去 文自拾
  春节放假的时候，又有一天梦见她，第二天她冒着漫天大雪，傻傻地跑来见我。她说，见见傻傻的我，天很冷，心很暖。她回去后，我写了一篇文章，题目叫——从此梦中只有你。我们没在一起的很长一段时间里，她都在我的心底，一次次出现在我的梦里。我对她说，在一起之前，是胆小且闷骚，在一起之后，我变得不要脸了。不要脸的——去爱你。那文章没写完，火车上，给她看了。我有点小失望，花了好几个小时写，她分分钟就看完，很希望她逐
• 在一台Ubuntu计算机上构建Hyperledger Fabric网络 落叶无声9 区块链超级账本Hyperledgerfabric区块链ubuntu构建hyperledgerfabric
  在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
• Day17笔记-高阶函数 ~在杰难逃~ Python笔记python开发语言pycharm数据分析
  高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab
• 2022现在哪个打车软件比较好用又便宜 实惠的打车软件合集 高省APP珊珊
  这是一个信息高速传播的社会。信息可以通过手机，微信，自媒体，抖音等方式进行传播。但同时这也是一个交通四通发达的社会。高省APP，是2022年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。珊珊导师，高省邀请码777777，注册送2皇冠会员，送万元推广大礼包，教你如何1年做到百万团队。高
• 百善孝为先 杜友顺
  2018年11月29日天气~晴星期四找点空闲找点时间领着孩子常回家看看带上笑容带上祝福陪同爱人常回家看看家，永远是儿女们幸福温暖的港湾，那里有我们日夜思念的父母，有着彼此的牵挂，无论走到哪里，家永远是避风雨的港湾。今天没事，和媳妇回了趟老家，看看父母，回到家，房间里不算凌乱，可是细心的我发现有的地方已经沾满了灰尘，桌子上父亲不离手的烟灰缸也弹满了烟灰。几个马上就要腐烂掉的水果蔫耷的搭拉着脑袋躺在了
• ARM驱动学习之4小结 JT灬新一 嵌入式C++arm开发学习linux
  ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
• 对于写作者最重要的两点：热情和分享 鱼和熊掌兼得
  【热情】在开头，塔奇曼提到光有热情是不够的。但是，要想长期的坚持写作，没有热情是不行的。很多人都说，这是一个对写作者很优待的时代，也有很多人前仆后继的写作。在写作这条路上的人，始终很多，一些人来了，一些人走了，但是能坚持下来的却只有那么几个。不知道什么时候开始，写作变现这个词火了起来。不管是谁，都想来分一杯羹。可是写作变现真的没有这么容易，鱼哥说过，写作的人千千万万，能变现的也不过是其中的千分之一
• 似乎老是忘记什么东西 灰台
  S带上了耳机，眼前的一切都与她隔绝开来。虽是初春的好天气，花都开的正鲜艳，行人也都驻足欣赏，还有不少怀着好心情的年轻人在花树下打闹。不过S似乎并不在意这些，连耳机传来的rap也没有调动起她的兴致。一瞬间，心脏好像变成了黑洞，“啊，我身边还有几个人呢，似乎没有了吧”。阳光的温度覆盖到了脖子上，S抬头看了看开满花的树，“我妈好像还挺喜欢花的”，S随手拍了一张照片，微信发到自己一家三口的群里。过了一会，
• mac电脑命令行获取电量 小米人er 我的博客macos命令行
  在macOS上，有几个命令行工具可以用来获取电量信息，最常用的是pmset命令。你可以通过以下方式来查看电池状态和电量信息：查看电池状态：pmset-gbatt这个命令会返回类似下面的输出：Nowdrawingfrom'BatteryPower'-InternalBattery-0(id=1234567)95%;discharging;4:02remainingpresent:true输出中包括电
• 广州会刊小程序开发公司哪家好｜开发多少钱费用｜专业外包服务 红匣子实力推荐
  在选择广州会刊小程序开发公司时，有几个关键因素需要考虑。首先，您应该确定自己的需求和目标，以便找到最合适的开发公司。其次，您需要考虑公司的经验和专业知识。最后，您还应该考虑公司的信誉和口碑。开发-联系电话：13642679953（微信同号）首先，您应该明确自己的需求和目标。会刊小程序是一种用于展示会议信息和日程安排的应用程序。在选择开发公司之前，您应该明确自己的需求，包括功能要求、设计风格和用户体
• 如何选择最适合你的项目研发管理软件？TAPD卓越版全面解析 北京云巴巴信息技术有限公司 产品经理需求分析
  在当今快速发展的科技时代，项目研发管理软件已成为企业不可或缺的重要工具。面对市场上琳琅满目的产品，如何选择一款适合自己团队的项目研发管理软件呢？本文将围绕项目研发管理软件的选择标准，重点介绍TAPD卓越版的特点、优势以及使用体验，让你更好地理解和选择适合自己的项目研发管理软件。项目研发管理软件的选择标准在选择项目研发管理软件时，我们需要考虑以下几个方面的因素：功能全面性：软件是否覆盖了从需求管理、
• 目前哪里有卖高仿包包，推荐十个渠道已更新 富腕表之家
  1、工厂购买，推荐微信:【76929666】目前买的人最多的渠道。2、某宝购买，价格较高，质量没有保障。3、拼夕夕，价格是便宜，但是质量不敢想象。4、专柜购买，数量较少，经常断货，价格也太高不好接受。5、批发市场购买，可遇不可求，一般生活在批发市场附近的，根本不用考虑在哪里买高仿包包分几个级别？在当今的包类市场中，广州作为一个知名的货源地，已经成为高仿包行业的一个重要标志。随着市场的需求增加，高仿
• 男女关系里的13条真理 梦仔i
  1、爱情是一种神奇的力量，会使人从哪里摔倒就从哪里爬起来，除非摔得感情残废了。2、男的追女的，只要男的坚持不懈，最后一般可以追到；而女的追男的，只要男的不愿意，肯定追不到；因为男人皮较厚、心较硬，而女人则相反。3、男人往往可以同时有几个同性好朋友，这些朋友可以互相认识或不认识，可以相差很大；而女人的同性好朋友往往只能有一个，且是排他的。男人的朋友可以是有男有女且年长年幼的，而女人的朋友大多是男的且
• 4招写出高价值文章 zhiliner
  文章写得泛泛是因为思考得不够深，思考得越深文章会越有价值。拿到一个主题一定要去深入挖掘事件背后的东西，比如人物困境以及趋势性的东西。写作过程中有几个深度思考的方法一、解剖，让旧素材焕发新意作为一个写作者，我们能够做的最大贡献，就是给出自己看世界的角度。解剖其实就是把这个话题相关的信息都列出来，详细的列出来，看清楚它的内部。我们看到一个老话题或者一段旧素材的时候，不要只看这个素材或者话题本身，一定要
• 和自己结婚，是一种怎样的体验 只如初见_2020
  一个17岁谈恋爱，19岁结婚，然后离了三次婚的女人，站在台上说：“现在我结婚了，和那个一直以来，真正想在一起的人结婚了，那个人就是我自己。”她说，在我9岁前，我已经在二十几个寄养家庭中待过。我从童年到成年，就只有一个目标，不要被落下。而我实现这一目标的方式就是，我要结婚。我第一次的结婚对象，是我17岁时遇到的人。我们两年之后结了婚，当时我19岁。他是个非常好的人，来自于非常棒的家庭，他是工商管理硕
• Python开发常用的三方模块如下： 换个网名有点难 python开发语言
  Python是一门功能强大的编程语言，拥有丰富的第三方库，这些库为开发者提供了极大的便利。以下是100个常用的Python库，涵盖了多个领域：1、NumPy，用于科学计算的基础库。2、Pandas，提供数据结构和数据分析工具。3、Matplotlib，一个绘图库。4、Scikit-learn，机器学习库。5、SciPy，用于数学、科学和工程的库。6、TensorFlow，由Google开发的开源机
• ES聚合分析原理与代码实例讲解 光剑书架上的书 大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
  ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
• Shell、Bash、Zsh这都是啥啊 小白码上飞 bashlinux开发语言
  Zsh和Bash都是我们常用的Shell，那先搞明白啥是shell吧。Shell作为一个单词，他是“壳”的意思，蛋壳坚果壳。之所以叫壳，是为了和计算机的“核”来区分，用它表示“为使用者提供的操作界面”。所以这个命名其实很形象，翻译成中文，直译过来叫“壳层”。个人认为这个叫法很奇怪，意译貌似也没有什么好的词汇来匹配。就还是叫shell吧。维基百科给的定义是：Incomputing,ashellisa
• 希望和悲伤都是照亮我们人生的一缕光 山月映雪
  我开始并不想读《云边有个小卖部》，但看到好几个学生就都在读这本书，为了了解学生的阅读实际，我就拿起这本书翻看起来。读了十几页，发现小说的语言中不时有一些粗俗的字眼，感觉自己读不下去了。小说一开始把云边镇风景写的特别的美好，我错判为脱离现实的鸳鸯蝴蝶派小说，对于人为制造的童话世界的人与物，我真的不太感兴趣，所以就没有再读了。有天在教室闲转，顺手又拿起了这本书看了起来，这次我才真的看进去了。这部小说除
• 虚张声势 六月荷清香
  绵绵密密的细雨不间断地下个不停，给这初冬的天气添了几份清冷和寂寥。午后的菜市场内没有一个顾客光顾，几个分肉的屠户望着案板上那些没有分完的肉，还在期待着来一个主顾将它们一起买走。贩卖小菜的女人一边漫不经心地择着菜，一边不时打个哈欠，这样的时光正是好睡觉的时候，可是一天的工作没有完成，还是要坚守岗位。喜欢开玩笑的屠户不时说几句黄段子，调侃着胖胖的卖鸡老板娘，大家说说笑笑着以打发这无聊的时光。张屠户打了
• 开发者关心的那些事 圣子足道 ios游戏编程apple支付
  我要在app里添加IAP，必须要注册自己的产品标识符（product identifiers）。产品标识符是什么？ 产品标识符（Product Identifiers）是一串字符串，它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息，标识符只能包含大小写字母（A-Z）、数字（0-9）、下划线（-）、以及圆点(.)。你可以任意排列这些元素，但我们建议你创建标识符时使用
• 负载均衡器技术Nginx和F5的优缺点对比 bijian1013 nginxF5
          对于数据流量过大的网络中，往往单一设备无法承担，需要多台设备进行数据分流，而负载均衡器就是用来将数据分流到多台设备的一个转发器。         目前有许多不同的负载均衡技术用以满足不同的应用需求，如软/硬件负载均衡、本地/全局负载均衡、更高
• LeetCode[Math] - #9 Palindrome Number Cwind javaAlgorithm题解LeetCodeMath
  原题链接：#9 Palindrome Number   要求： 判断一个整数是否是回文数，不要使用额外的存储空间   难度：简单   分析： 题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间，O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转，然后与原数字进行比较。 注：没有看到有关负数是否可以是回文数的明确结论，例如
• 画图板的基本实现 15700786134 画图板
   要实现画图板的基本功能，除了在qq登陆界面中用到的组件和方法外，还需要添加鼠标监听器，和接口实现。 首先，需要显示一个JFrame界面： public class DrameFrame extends JFrame {              //显示
• linux的ps命令 被触发 linux
  Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照，就是执行ps命令的那个时刻的那些进程，如果想要动态的显示进程信息，就可以使用top命令。 要对进程进行监测和控制，首先必须要了解当前进程的情况，也就是需要查看当前进程，而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行
• Android 音乐播放器 下一曲 连续跳几首歌 肆无忌惮_ android
  最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调 player.setOnCompletionListener(new OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.reset(); Log.i("H
• java导出txt文件的例子 知了ing javaservlet
  代码很简单就一个servlet,如下： package com.eastcom.servlet; import java.io.BufferedOutputStream; import java.io.IOException; import java.net.URLEncoder; import java.sql.Connection; import java.sql.Resu
• Scala stack试玩, 提高第三方依赖下载速度 矮蛋蛋 scalasbt
  原文地址： http://segmentfault.com/a/1190000002894524 sbt下载速度实在是惨不忍睹, 需要做些配置优化 下载typesafe离线包, 保存为ivy本地库 wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip 解压r
• phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。 alleni123 linuxspider
  1. 首先从官网 http://phantomjs.org/下载phantomjs压缩包，解压缩到/root/phantomjs文件夹。 2. 安装依赖 sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6 3. 配置环境变量 vi /etc/profil
• JAVA IO FileInputStream和FileOutputStream，字节流的打包输出 百合不是茶 java核心思想JAVA IO操作字节流
  在程序设计语言中，数据的保存是基本，如果某程序语言不能保存数据那么该语言是不可能存在的，JAVA是当今最流行的面向对象设计语言之一，在保存数据中也有自己独特的一面，字节流和字符流 1，字节流是由字节构成的，字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流   类 FileInputStream
• Spring基础实例（依赖注入和控制反转） bijian1013 spring
  前提条件：在http://www.springsource.org/download网站上下载Spring框架，并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口 package com.bijian.spring.base3; public interface Weapon { void kil
• HR看重的十大技能 bijian1013 提升能力HR成长
      一个人掌握何种技能取决于他的兴趣、能力和聪明程度，也取决于他所能支配的资源以及制定的事业目标，拥有过硬技能的人有更多的工作机会。但是，由于经济发展前景不确定，掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。 　　一、解决问题的能力 　　每天，我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决
• 【Thrift一】Thrift编译安装 bit1129 thrift
  什么是Thrift The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s
• 【Avro三】Hadoop MapReduce读写Avro文件 bit1129 mapreduce
  Avro是Doug Cutting(此人绝对是神一般的存在）牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的（使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景）,因此Hadoop MapReduce集成Avro也就是自然而然的事情。 这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计，然后将计算结果
• nginx定制500，502，503，504页面 ronin47 nginx　错误显示
  server { listen 80; error_page 500/500.html; error_page 502/502.html; error_page 503/503.html; error_page 504/504.html; location /test {return502;}} 配置很简单，和配
• java-1.二叉查找树转为双向链表 bylijinnan 二叉查找树
  import java.util.ArrayList; import java.util.List; public class BSTreeToLinkedList { /* 把二元查找树转变成排序的双向链表 题目： 输入一棵二元查找树，将该二元查找树转换成一个排序的双向链表。 要求不能创建任何新的结点，只调整指针的指向。 10 / \ 6 14 / \
• Netty源码学习-HTTP-tunnel bylijinnan javanetty
  Netty关于HTTP tunnel的说明： http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description 这个说明有点太简略了 一个完整的例子在这里： https://github.com/bylijinnan
• JSONUtil.serialize(map)和JSON.toJSONString(map)的区别 coder_xpf jqueryjsonmapval()
   JSONUtil.serialize(map)和JSON.toJSONString(map)的区别   数据库查询出来的map有一个字段为空   通过System.out.println()输出 JSONUtil.serialize(map)： {"one":"1","two":"nul
• Hibernate缓存总结 cuishikuan 开源sshjavawebhibernate缓存三大框架
  一、为什么要用Hibernate缓存？ Hibernate是一个持久层框架，经常访问物理数据库。 为了降低应用程序对物理数据源访问的频次，从而提高应用程序的运行性能。 缓存内的数据是对物理数据源中的数据的复制，应用程序在运行时从缓存读写数据，在特定的时刻或事件会同步缓存和物理数据源的数据。   二、Hibernate缓存原理是怎样的？ Hibernate缓存包括两大类：Hib
• CentOs6 dalan_123 centos
  首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块：yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang
• 10款用 jquery 实现滚动条至页面底端自动加载数据效果 dcj3sjt126com JavaScript
    无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条
• ImageButton去边框&Button或者ImageButton的背景透明 dcj3sjt126com imagebutton
  在ImageButton中载入图片后，很多人会觉得有图片周围的白边会影响到美观，其实解决这个问题有两种方法 一种方法是将ImageButton的背景改为所需要的图片。如：android:background="@drawable/XXX" 第二种方法就是将ImageButton背景改为透明，这个方法更常用 在XML里；    <ImageBut
• JSP之c:foreach eksliang jspforearch
  原文出自：http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html <c:forEach>标签用于通用数据循环，它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1
• Android实现主动连接蓝牙耳机 gqdy365 android
  在Android程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型，这篇文字只讨论如何与蓝牙耳机连接。 大致可以分三步： 一、扫描蓝牙设备： 1、注册并监听广播： BluetoothAdapter.ACTION_DISCOVERY_STARTED BluetoothDevice.ACTION_FOUND BluetoothAdapter.ACTION_DIS
• android学习轨迹之四：org.json.JSONException: No value for hyz301 json
  org.json.JSONException: No value for items  在JSON解析中会遇到一种错误，很常见的错误   06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&
• 干货分享：从零开始学编程 系列汇总 justjavac 编程
  程序员总爱重新发明轮子，于是做了要给轮子汇总。 从零开始写个编译器吧系列 (知乎专栏) 从零开始写一个简单的操作系统 (伯乐在线) 从零开始写JavaScript框架 (图灵社区) 从零开始写jQuery框架 (蓝色理想 ) 从零开始nodejs系列文章 (粉丝日志) 从零开始编写网络游戏 
• jquery-autocomplete 使用手册 macroli jqueryAjax脚本
  jquery-autocomplete学习 一、用前必备 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 当前版本：1.1 需要JQuery版本：1.2.6 二、使用 <script src="./jquery-1.3.2.js" type="text/ja
• PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改 超声波 oracleplsql
  　　在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库，常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错，什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户
• 数据仓库数据模型之：极限存储--历史拉链表 superlxw1234 极限存储数据仓库数据模型拉链历史表
  在数据仓库的数据模型设计过程中，经常会遇到这样的需求： 1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址，产品的描述信息，订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息，比如，查看某一个订单在历史某一个时间点的状态，    比如，查看某一个用户在过去某一段时间内，更新过几次等等; 4. 变化的比例和频率不是很大，比如，总共有10
• 10点睛Spring MVC4.1-全局异常处理 wiselyman spring mvc
  10.1 全局异常处理 使用@ControllerAdvice注解来实现全局异常处理; 使用@ControllerAdvice的属性缩小处理范围 10.2 演示 演示控制器 package com.wisely.web; import org.springframework.stereotype.Controller; import org.spring

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.