jQuery(easyUI)学习杂记

21.ajax 结合 FormData 向后台（asp.net mvc）传送文件–2018 年 3 月 30 日

<form id="frm">
  <input id="age" name="age" type="text" />
  <input id="address" name="address" type="text" />
  <input id="photo" name="photo" type="file" />
  <input id="submit" type="button" />
</form>

<script type="text/javascript">
     $(function(){
          $('#submit').bind('click', function(){ Upload(); })
     });

     function Upload(){
          var frm = new FormData(document.getElementById('frm'));
          $.ajax({
               url: '@Url.Action("Import", "Home")',
               type: "post",
               data: frm,
               processData: false,
               contentType: false,
               success: function (data) {
               }
          });
     }
</script>

namespace xx
{
    public class HomeController : Controller
    {
        [HttpPost]
        public ActionResult Import(string age, string address, HttpPostedFileBase photo)
        {
            //TODO.
        }
    }
}

20.获取第一代子元素的语法是 parent>child 选择器

例：获取所有 div 元素下第一代子元素 span 元素的语法是

1	$("div>span");

19.id 选择器用#号

18.class 选择器用.

17.星号(*)选择器,获取页面的所有元素。“全部”

16.如果要选取多个指定的元素，则用’,’分开。

1	$("sele1,sele2,...");

15.:first 选择器选取第一个元素

例：获取 li 标签中第一个元素

1	$("li:first");

14.:eq(index)选择器，获取指定的 index 元素，下标从 0 开始。

1	$("li:eq(3)").css("background-color", "red"); //把第4个li元素的背景换成红色

13.:contains(string)选择器，选取含有 string 字符串的所有元素

12.:has(selector)选择器，选择器中包含指定元素名称的全部元素

例：改变 li 标签下 p 标签的背景

1	$("li:has(p)").css("background-color", "blue");

11.:hidden 显示隐藏的元素

1 2	var $strHtml = $("input:hidden").val(); //显示隐藏的input标签 $("div").html($strHtml);

10..:visible 获取所有 display 不为 none 的元素

09.:input 功能是返回全部的表单元素

08.bind()方法与 unbind()

1 2	$(selector).bind(event,[data] function) $(selector).unbind(event,fun)

07.one()方法不同于 13 中的 bind()与 unbind()方法，此方法只能触发一次

06.Ajax

get:一般用于信息获取。使用 url 传递参数。对所发送的信息数量限制在 2000 字符内。

post:一般用于向服务器修改数据。对所发送的信息数量无限制。

05.Http 请求状态码：

1xx:信息类，表示收到 Web 浏览器请求，正在进一步处理中

2xx:成功，表示用户请求被正确就收，理解和处理

3xx:重定向，表示请求没有成功，客户必须采取进一步处理

4xx:客户端错误，表示客户端提交的请求有错误

5xx:服务器错误，表示服务器不能完成对请求的处

found:意味着请求中所引用的文档不存在

04.UI

拖曳插件—draggable

1 2	$(selector). draggable({options}); options属性。如"containment"属性指定拖曳区域，"axis"属性设置拖曳时的坐标方向。

放置插件—droppable(购物车?)

$(selector).droppable({options})
    drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。
    如：$(function () {
                $(".drag").draggable();
                $(".cart").droppable({
                    drop: function () {
                            ?
                            ?
                            ?
                    }
                })
            });

拖曳排序插件—sortable

1	$(selector).sortable({ options });

面板折叠插件—accordion

1	$(selector).accordion({ options });

选项卡插件-tabs

$(selector).tabs({ options });
$(function () {
  $("#tabs").tabs({
    //设置各选项卡在切换时的动画效果
    fx: { opacity: "toggle", height: "toggle" },
    event: "mousemove", //通过移动鼠标事件切换选项卡
  });
});

对话框插件—dialog

1	$(selector).dialog({ options });

菜单工具插件-menu

1	$(selector).menu({ options });

03.jQuery Select–2015 年 7 月 3 日 18:10:06

$("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
var checkValue=$("#select_id").val();  //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值
$("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$("#select_id ").val(4);   //设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为
$("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option

02.属性选择器

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

01.EasyUI datagrid

第一步：添加样式和 js 脚本在前台添加展示数据表格的 table 元素
注：表格的属性可以在 table 中设置（Unobtrusive），也可以直接使用 js 脚本进行控制。建议使用 js 脚本控制
属性的定义：
请参见 Jquery easyui API

<div>
  <table
    id="tt"
    style="width: 700px;"
    title="标题，可以使用代码进行初始化，也可以使用这种属性的方式"
    iconcls="icon-edit"
  ></table>
</div>

第二步：在 doucment.ready 中初始化表格的属性以及数据获取的方式。

$('#tt').datagrid({
        url: '/UserInfo/GetAllUserInfos',
        title: '演示表格使用',
        width: 700,
        height: 400,
        fitColumns: true,
        idField: 'ID',
        loadMsg: '正在加载用户的信息...',
        pagination: true,
        singleSelect: false,
        pageSize:10,
        pageNumber:1,
        pageList: [10, 20, 30],
        queryParams: {},
        columns: [[
                { field: 'ck', checkbox: true, align: 'left', width: 50 },
                { field: 'ID', title: '主键', width: 80 },
                { field: 'UserName', title: '用户名', width: 120 },
                { field: 'SubTime', title: '提交时间', width: 80, align: 'right',
                    formatter:function(value,row,index){
                        return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S");
                    }
                    }，
                    {field:'showprice',title:'商品价格',width:80,align:'right',
                            styler:function(value,row,index){
                                if (value < 20){
                                    return 'background-color:#ffee00;color:red;';
                                }
                            },
                            formatter:function(value,row,index){
                                return "<a href='#' onclick='editGoodsPrice("+row.goodsid+");return false;'>"+value+"</a>";
                            }
                }
            ]],
            toolbar: [{
                    id: 'btnDownShelf',
                    text: '上架',
                    iconCls: 'icon-add',
                    handler: function () {
                        var rows = $('#goodGrid').datagrid('getSelections');
                        if (!rows || rows.length == 0) {
                            //alert("请选择要修改的商品！");
                            $.messager.alert("选择商品提醒", "请选择要修改的商品!", "error");
                            return;
                        }
                        $.messager.confirm("上架提醒", "您是否要真的要将此商品上架？", function (r) {
                            if (r) {
                                updateGoodsNewHot(rows, "onshelf");
                            }
                        });
                    }
        }],
        onHeaderContextMenu: function (e, field) {

        }
});

第三步：后台设置加载的数据：
注意：表格 Post 或者 get 回来的请求中
page：3 代表 page 为 key，然后选择的当前页码为 3
rows：10 代表一页的大小为 10
后台返回的数据的格式为：{total：’’，rows：[{},{}]}
只要包含了总数 tatol 字段，rows 是具体的行数
例如：
ASP.NET MVC 例子

public JsonResult GetAllUserInfos()
{
    int pageSize = 5;
    int pageIndex = 1;
    int.TryParse(this.Request["page"], out pageIndex);
    int.TryParse(this.Request["rows"], out pageSize);

    pageSize = pageSize <= 0 ? 5 : pageSize;
    pageIndex = pageIndex < 1 ? 1 : pageIndex;

    var temp = db.UserInfo
        .OrderBy(u=>u.Sort)
        .Skip<UserInfo>((pageIndex-1)*pageSize)
        .Take<UserInfo>(pageSize)
        .ToList<UserInfo>();
    Hashtable ht = new Hashtable();
    ht["total"] = db.UserInfo.Count();
    ht["rows"] = temp;
    return Json(ht);
}

WinForm 例子

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    var strWebName = context.Request["WebName"] ?? string.Empty;
    var  GoodsNo = context.Request["GoodsNo"] ?? string.Empty;
    int categoryId = 0;

    int pageIndex = 1;
    int pageSize = 10;

    int.TryParse(context.Request["rows"], out pageSize);
    int.TryParse(context.Request["page"], out pageIndex);

    decimal priceLeft = 0;
    decimal priceRight = 1000000;
    int goodsStatus = 0;
    decimal.TryParse(context.Request["PriceLeft"], out priceLeft);
    decimal.TryParse(context.Request["PriceRight"], out priceRight);
    int.TryParse(context.Request["CategoryId"], out categoryId);
    int.TryParse(context.Request["GoodsStatus"], out goodsStatus);
    var goodsQueryParamter = new GoodsQueryParamter();


    goodsQueryParamter.GoodsStatus = (Model.GoodsModel.GoodsStatusEnum)goodsStatus;

    var ds = goodsService.GetGoodsList(goodsQueryParamter);
    string json = string.Empty;

    if (ds != null && ds.Tables.Count > 0)
    {
        System.Text.StringBuilder rowJson = new System.Text.StringBuilder();
        int colLen = ds.Tables[0].Columns.Count;
        DataColumnCollection col = ds.Tables[0].Columns;
        foreach (DataRow row in ds.Tables[0].Rows)
        {
            System.Text.StringBuilder colJson = new System.Text.StringBuilder();
            rowJson.Append("{");
            for (int i = 0; i < colLen; i++)
            {
                colJson.Append("\"" + col[i].ColumnName + "\":\"" + row[i].ToString() + "\",");
            }
            rowJson.Append(colJson.ToString().TrimEnd(','));
            rowJson.Append("},");
        }
        json = "{\"total\":" + ds.Tables[0].Rows[0]["sumGoods"] + ",\"rows\":[" + rowJson.ToString().TrimEnd(',') + "]}";
    }
    context.Response.Write(json);

}

00.easyUI 的 datagrid 前台分页代码

//初始化dategrid
$('#tt').datagrid({
    url:null,
    pagination:true,
    pageSize:20,
    pageNumber:1,
    rownumbers:true
});
$('#tt').datagrid('getPager').pagination({
    displayMsg:'当前显示从 [{from}] 到 [{to}] 共[{total}]条记录',
    onSelectPage : function(pPageIndex, pPageSize) {
        //改变opts.pageNumber和opts.pageSize的参数值，用于下次查询传给数据层查询指定页码的数据
        var gridOpts = $('#tt').datagrid('options');
        gridOpts.pageNumber = pPageIndex;
        gridOpts.pageSize = pPageSize;
        //定义查询条件
        var queryCondition = {name:"剑豪"};
        //异步获取数据到javascript对象，入参为查询条件和页码信息
        var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,gridOpts);
        //使用loadDate方法加载返回的数据
        $('#tt').datagrid('loadData',{"total" : oData.page.recordCount,"rows" : oData.data});
    }
});