EasyUI的使用

• datagrid

（1）复选列默认勾选记录

var rows = 50;
var scrollIng = false; //滚动加载中
var apiUrl = "http://localhost/api/test";
var queryParams = {sorters:[],filters:[]};
var datagr = $("#dg").datagrid({
    url: apiUrl,           // api请求地址
    method:'post',  // 请求方法类型 get/post   
    loadFilter: function(data)
    {
        if(data.data)
        {
          if(data.data.length < rows)
          {
              scrollIng = true;
          }  
          return data.data
        }else
        {
            return data;
        }
    },
    // 请求的条件,如果没有这个这里进行属性赋值的话，列表滚动的第二页之后不会将现有的参数进行传递。
    queryParams: queryParams,
    onLoadSucess: function(data)
    {
      $.each(data.rows, function(index,item)
      {
        if(item.checked == "true")
        {
          $("#dg").datagrid('checkRow',index);
        }else
        {
          $("#dg").datagrid('uncheckRow',index);
        }
      });
    }
});

（2）列表以滚动的形式加载数据

var rows = 50;
var scrollIng = false; //滚动加载中
var apiUrl = "http://localhost/api/test";
var queryParams = {sorters:[],filters:[]};
var datagr = $("#dg").datagrid({
    url: apiUrl,           // api请求地址
    method:'post',  // 请求方法类型 get/post   
    loadFilter: function(data)
    {
        if(data.data)
        {
          if(data.data.length < rows)
          {
              scrollIng = true;
          }  
          return data.data
        }else
        {
            return data;
        }
    },
    // 请求的条件,如果没有这个这里进行属性赋值的话，列表滚动的第二页之后不会将现有的参数进行传递。
    queryParams: queryParams
});

        // 滚动 - 加载数据
        $(".datagrid-view2 .datagrid-body").scroll(function()
        {
            var scrollHeight = $(this)[0].scrollHeight;
            var scrollTop = $(this)[0].scrollTop;
            if(scrollTop && scrollTop + $(this).height() >= scrollHeight)
            {
                if(msg)
                {
                    $.messager.alert("提示",msg);
                    msg = "";
                }
                if(scrollIng) return ;
                scrollIng = true;
                
                page += 1;
                
                var scrollurl = apiUrl + "?page=" + page + "&rows=" + rows;
                var options = datagr.datagrid("options");
                datagr.datagrid("loading"); // 加载中
                var queryParams = options.queryParams;                
                httpPost(scrollurl,queryParams,function(res)
                {
                    datagr.datagrid("loaded"); // 加载列表
                    if(res && res.data)
                    {                        
                        for(var i = 0, i < res.data.length; i < length; i++)
                        {
                            var row = res.data[i];
                            datagr.datagrid("appendRow", row);
                        }
                        datagr.datagrid("acceptChanges"); // 防止下拉数据，当做新增数据
                        
                        if(res.data.length < rows)
                        {
                            scrollIng = true;
                            msg = "暂无数据！";
                        }else
                        {
                            scrollIng = false;
                        }
                    }
                });                
            }
        });

（3）修改datagrid行样式

var lastRowIndex = -1; // 上次选中的行
        // 修改样式
        $('#dg').datagrid({
            rowStyler:function(index,row){  
                 //修改背景色
                $("[datagrid-row-index='" + index + "']").css({"background-color":"#00b1c2"});
            }  
        });

        $('#dg').datagrid({            
            //单击事件
            onClickRow:function(rowIndex,rowData){  
                var now = new Date();
            
                // 设置上次选中行的颜色为指定颜色
                if(lastRowIndex > -1)
                {
                    $("[datagrid-row-index='" + lastRowIndex + "']").css({"background-color":"#00b1c2"});
                }                                 
                var css = $("[datagrid-row-index='" + rowIndex + "']").css({"background-color":"#0081c2"});

                // 存储本次序号
                lastRowIndex = rowIndex;                
            }
        });

（4）重新加载列表

$("#dg").datagrid("reload");

（5）列格式化输出

function dayFormatter(value, row, index) {
      if (value)
      {
          var txt = dayjs(value).format("YYYY-MM-DD");
          if (txt == "1900-01-01")
          {
              return "";
          }
         return txt;
       }
}

使用：添加formatter属性，formatter:dayFormatter

• 单选组的使用

<div class="easyui-radio" style="margin-right: 20px;margin-top:2px">
     <form id="ff">
         <input class="easyui-radiobutton" name="radioGroup" data-bind="status"
      data-options="onChange: onSearch" value="false" label="是" labelPosition="after">
         <input class="easyui-radiobutton" name="radioGroup" data-bind="status"
      data-options="onChange: onSearch" value="true" aria-valuemax="3" label="否"
      labelPosition="after">
          <input class="easyui-radiobutton" name="radioGroup" data-bind="status"
      data-options="onChange: onSearch" value="" label="全部" labelPosition="after">
      </form>
</div>

// 获取选中的值

<javascript>
  var statusValue = $("input[name=radioGroup]:checked").val();
</javascript>

 说明： labelPosition：标签位置，值有：before、after、top

 

• jQuery调用控件元素

("#divId").css("display","none");

// ("#dg").datagrid("showColumn","列id")

("#dg").datagrid("showColumn","id");