亚洲国产日韩在线一区,亚洲欧洲日产国产最新,亚洲成AV人片在线观看无

使用 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 發表評論