BlogJava-喵本聪-随笔分类-JQuery

使用 multiselect 多项选择

Ying-er — Thu, 24 May 2018 07:36:00 GMT

https://github.com/davidstutz/bootstrap-multiselect

"~/Content/bootstrap-multiselect.css"
"~/Scripts/bootstrap-multiselect.js",

SelectList作成

foreach (MemberModel m in ls)
            {
                SelectListItem item = new SelectListItem()
                {
                    Value = m.LoginUserId,
                    Text  = m.UserName,
                };
                lsMember.Add(item);
            }

ViewBag保存

ViewBag.AllChkMember = bizTown.GetChkMembers();

初始化

$('#editMembers,#editCustomerMembers').multiselect({
        // ====== 日本語化 ====== start ======
        selectAllText    : 'すべて'  ,
        filterPlaceholder: '検索'    ,
        nonSelectedText  : '未選択'  ,
        nSelectedText    : '# 個選択',
        allSelectedText  : '全選択'  ,
        // ====== 日本語化 ======  end  ======

        // 氏名の表示数設定
        numberDisplayed: 5,
        // Group表示
        enableCollapsibleOptGroups: true,
        // Group初期Close状態に設定
        collapseOptGroupsByDefault: true,
        // 検索機能Open
        enableFiltering: true
    });

引用

@Html.ListBoxFor(model => model.SecChkArr, ViewBag.AllChkMember as IEnumerable<SelectListItem>, new { @id = "editMembers", @class = "multiselect form-control", multiple = "multiple" })

注：SecChkArr是数组

Ying-er 2018-05-24 15:36 发表评论

Datepicker 被遮挡不可点击对应策

Ying-er — Wed, 23 May 2018 02:39:00 GMT

position: relative; z-index: 100000;

Ying-er 2018-05-23 10:39 发表评论

使用JQuery的fileupload插件，漂亮的实现文件上传

Ying-er — Mon, 14 Mar 2016 07:47:00 GMT

https://blueimp.github.io/jQuery-File-Upload/

进度条虽帅，我只取一瓢饮
道理相通，我简单分享下在.net MVC下的实装

1.制作Model类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace RCRS.WebApp.LG.EM.Models
{
//----------------------------------------------------------------
///

/// Import画面用
///

    //----------------------------------------------------------------
    public class tmp_UploadFile
    {
        ///

public HttpPostedFileBase FileName { get; set; }
}
}

2.实装controller里的对应方法，我这个处理逻辑比较复杂，懒得修改了，反正就这个意思

//----------------------------------------------------------------
///

/// アップロード
///

        ///
        //----------------------------------------------------------------
        [HttpPost]
        public virtual ActionResult UploadFile()
        {
            HttpPostedFileBase uploadedFile = Request.Files["FileName"];
            string message = "アップロード失敗しました。";
            bool isUploaded = false;
            string path = "";
            string dateTimeNow = DateTime.Now.ToString("yyMMdd-hhmmss");
            string userName = User.Identity.GetUserName();
            string uploadMsg = string.Empty;

            if (uploadedFile != null && uploadedFile.ContentLength != 0)
            {
                string pathForSaving = Server.MapPath("~/App_Data/Uploaded/");
                try
                {
                    if (BsnssBihin.IsExcel(uploadedFile.FileName))
                    {
                        path = System.IO.Path.Combine(pathForSaving, dateTimeNow + "_" + uploadedFile.FileName);
                        uploadedFile.SaveAs(path);
                        isUploaded = BsnssBihin.UploadBihinChange(path, userName, ref uploadMsg);
                        if (isUploaded)
                        {
                            message = "アップロード成功しました！" + "\n" + uploadMsg;
                            Logger.Info("[成功]備品アップロード, " + dateTimeNow + ", " + "[" + userName + "]" + "[" + path + "]" + uploadMsg);
                        }
                        else
                        {
                            message = "アップロード失敗しました。" + "\n" + uploadMsg;
                            Logger.Info("[失敗]備品アップロード, " + dateTimeNow + ", " + "[" + userName + "]" + "["+path + "]" + uploadMsg);
                        }
                    }
                    else
                    {
                        message = "ファイルの形式は不正です。";
                    }
                }
                catch (Exception ex)
                {
                    message = string.Format("失敗しました: {0}", ex.Message);
                    Logger.Info("[失敗]備品アップロード: " + ex.Message + dateTimeNow + ", " + "[" + userName + "]" + "[" + path + "]");
                }
            }
            return Json(new { isUploaded = isUploaded, message = message }, "text/html");
        }

3.页面的实装

@model RCRS.WebApp.LG.EM.Models.tmp_UploadFile
<table align="center" style="margin-bottom:200px">
    <tr>
        <td>
            <div style="width:470px">
                <input type="text" id="tbx-file-path" value="ファイルを選択してください" readonly="readonly" />
            div>
        td>
        <td>
            <div style="width: 60px">
                <span class="btn btn-primary fileinput-button">
                    <span>選択span>
                    @Html.TextBoxFor(m => m.FileName, new { id = "file-upload", type = "file", accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })
                span>
            div>
        td>
        <td>
            <div style="width:60px">
                <a class="btn btn-primary" href="#" id="hl-start-upload">アップロードa>
            div>
        td>
    tr>
table>

<div id="loadingOver" class="loadingOver">div>
<div id="dvloader" class="dvloader">
    <span class="label label-info" style="align-content:center"> 処理中、少々お待ちくださいspan><br />
    <br />
    <img id="loadingGif" src="../Content/img/loader.gif" alt="" />
div>

@section scripts{
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/common")
    @Scripts.Render("~/bundles/fileupload")
    <script type="text/javascript">
        var data_upload;
        $(document).ready(function () {
            'use strict';
            $('#file-upload').fileupload({
                url: '../Bihin/UploadFile',
                dataType: 'json',
                add: function (e, data) {
                    data_upload = data;
                },
                done: function (event, data) {
                    if (data.result.isUploaded) {
                        $("#tbx-file-path").val("ファイルを選択してください");
                        data_upload = "";
                    }

                    $("#dvloader").css("display", "none");
                    $("#loadingOver").css("display", "none");

                    alert(data.result.message);
                },
                fail: function (event, data) {
                    data_upload = "";
                    if (data.files[0].error) {

                        $("#dvloader").css("display", "none");
                        $("#loadingOver").css("display", "none");

                        alert(data.files[0].error);
                    }
                }
            });
        });

        $("#hl-start-upload").on('click', function () {
            if (data_upload) {
                $("#dvloader").css("display", "block");
                $("#loadingOver").css("display", "block");
                data_upload.submit();
            }
            return false;
        });

        $("#file-upload").on('change', function () {
            $("#tbx-file-path").val(this.files[0].name);
        });

        script>
}

√，就是这个样子
还附赠了一个简易loding的实现
贴出CSS代码：

.dvloader {
    display:none;
    position:absolute;
    top:40%;
    left:40%;
    width:20%;
    height:20%;
    z-index:1001;
    text-align:center;
    font-size:1.5em;
}

.loadingOver {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#f5f5f5;
    opacity:0.5;
    z-index:1000;
}

这里，多说一嘴：
关于input 的accept属性，这里只想读入Excel，所以
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel
有点长啊，还好，并不忧伤
就酱。

Ying-er 2016-03-14 15:47 发表评论

使用Chosen，立马屌丝变高富帅！

Ying-er — Mon, 14 Mar 2016 07:27:00 GMT

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.

https://harvesthq.github.io/chosen/

.net MVC下实装小栗：

1.在对应的Controller里准备好数据源
比如：

ViewBag.専用場所CD = new SelectList(db.M_SenyouBasyos, "専用場所CD", "専用場所名", t10_備品台帳.専用場所CD);

2.页面绑定

Html.DropDownList("専用場所CD", null, new { @class = "chzn-select" })
@Html.ValidationMessageFor(model => model.専用場所CD)

3.配置chosen

$(".chzn-select").chosen(
            {
                no_results_text: "候補値が見つかりません:",
                search_contains: true
            });
        $(".chzn-select-deselect").chosen({ allow_single_deselect: true, no_results_text: '候補値が見つかりません' });

4.想直接控制chosen的width？
用JS搞定：

$(".chosen-container").css("width", "100%");

Ying-er 2016-03-14 15:27 发表评论

JQuery限制文本框只能输入N位小数四舍五入光标可移动可修改

Ying-er — Fri, 14 Feb 2014 01:26:00 GMT

/**
    * validate小数input
    */
    validateInputAsFlt:function($dom,fixed){
        $dom.keyup(function (event) {
            var k = event.keyCode;
            if (k == 37 || k == 38 || k == 39 || k == 40 || k == 8 || k == 46) {
                return;
            }
            var start = this.selectionStart,
                end = this.selectionEnd;
            $(this).val($(this).val().replace(/[^0-9.]/g, ''));
            $(this).val($(this).val().replace(/^\./g, ""));
            $(this).val($(this).val().replace(/\.{2,}/g, "."));
            $(this).val($(this).val().replace(".", "$#$").replace(/\./g, "").replace("$#$", "."));
            var str = ($(this).val()).substr(($(this).val()).indexOf('.'));
            if (str.length >= (fixed+2)) {
                var num = new Number($(this).val());
                $(this).val(num.toFixed(fixed));
            }
            this.setSelectionRange(start, end);
        }).bind("paste", function () {  //CTR+V
            $(this).val($(this).val().replace(/[^0-9.]/g, ''));
            $(this).val($(this).val().replace(/^\./g, ""));
            $(this).val($(this).val().replace(/\.{2,}/g, "."));
            $(this).val($(this).val().replace(".", "$#$").replace(/\./g, "").replace("$#$", "."));
            var str = ($(this).val()).substr(($(this).val()).indexOf('.'));
            if (str.length >= (fixed + 2)) {
                var num = new Number($(this).val());
                $(this).val(num.toFixed(fixed));
            }
        }).css("ime-mode", "disabled");
    },

Ying-er 2014-02-14 09:26 发表评论

JQuery 速成

Ying-er — Sat, 22 May 2010 04:25:00 GMT

windows.onload():

$().ready(
    function(){
         ;
     }
);

获取：
获取DOM元素：

$("element");//获取对应元素的相应结点
$(".classname");//获取对应class的相应结点
$("element.classname");//获取元素中的对应class结点
$("#id");//获取所对应的id结点
$("element#id");//获取某元素下的相应id结点
$("e1 > e2");//获取元素e1下的的所有e2元素
$("e1 e2");//获取e1元素中的所有e2元素
$("e1 + e2");//获取e1后的所有e2元素
$("e1 ~ e2");//获取与e1并列的所有e2元素
$(#id).html() ;//获取innerHTML
$("input[name=qq]") ;//获取元素

附：基本正则：

=   //等于
*=  //包含该值
!=  //不包含该值
^=  //以该值开头
$=  //以该值结尾

结点操作：

$(#id).html("");//=getElementById("id").innerHTML = ""
$("element").wrap("");//包含
$("element").append("<>");//在该element节点内，在原element内容之后追加
$("element").prepend("<>");//在该element节点内，在原element内容之前追加
$("element").before("<>");//在element结点之前追加
$("element").after("<>");//在element结点之后追加
$("element").remove(".classname");//删除对应class的element元素

CSS操作：

$("element").addClass("classname");
$("element").removeClass("classname") ;
$("element").toggleClass("classname"); //指定元素的css样式，有则删除，无则添加
$("element").css("attname"); //获取指定元素相应属性的值（attname例：color）
$("element").css("attname","value");
$("element").css({ "margin-left": "10px", "background-color": "blue" });

遍历：

$("element (input/select)").each(function(){
;
})

Ying-er 2010-05-22 12:25 发表评论

使用JQuery进行用户名校验

Ying-er — Sun, 25 Apr 2010 12:10:00 GMT

$(document).ready(function(){})：定义页面装载完成时，需要执行的方法。
$()获得页面指定的节点，参数是某种CSS的选择器。返回的是一个JQuery对象，可在其上执行JQuery方法。
val()方法可以获得节点的value属性值
html()设定某个节点中的html内容
click()相应鼠标点击事件
keyup()相应键盘弹起事件
$.get()可以和服务器进行get方式的交互，注册的callback方法会在数据回来的时候被调用，此方法会接收到代表服务器端返回数据的一个纯文本的参数
addClass()removeClass()给某个节点增加或删除一个class
解决中文乱码问题：发送给服务器端的数据在js中做两次encodeURI，然后在服务器端的代码中按UTF-8的方式做一次URLDecode

主要代码：

$.get("http://localhost:8080/JQueryStudy/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,
                    function(response){
                        $("#result").html(response);
                    }
                )

处理的Servlet

/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package com.linying;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* 用户名验证Servlet
* @author Ying-er
* @time 2010-4-25下午08:02:08
* @version 1.0
*/
public class UserVerify extends HttpServlet {

    /**
    * Processes requests for both HTTP GET and POST methods.
    * @param request servlet request
    * @param response servlet response
    */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String param = request.getParameter("userName");
            if (param == null || param.length() == 0) {
                out.println("用户名不能为空");
            } else {
                String userName = URLDecoder.decode(param, "UTF-8");
                System.out.println(userName);
                if (userName.equals("Ying-er")) {
                    out.println("用户名[" + userName + "]已经存在，请使用别的用户名注册");
                } else {
                    out.println("可以使用用户名[" + userName + "]注册");
                }
            }
        } finally {
            out.close();
        }
    }

    //

    /**
    * Handles the HTTP GET method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
    * Handles the HTTP POST method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
    * Returns a short description of the servlet.
    */
    public String getServletInfo() {
        return "Short description";
    }//

}

Ying-er 2010-04-25 20:10 发表评论