JQueryEasyUI学习笔记,回车键自定义

By admin in 4858美高梅 on 2019年4月10日

easyui 中datagrid
$(‘#dg’).datagrid(‘getSelected’);重临第2个被入选的行或只要未有入选的行则重临null。
$(‘#dg’).datagrid(‘getSelections’);再次来到全体被入选的行,当未有记录被选中的时候将回到1个空数组。
$(‘#dg’).datagrid(‘getRows’);
$(“#dg”).datagrid(‘getChanges’,”inserted”);//获取新拉长的行
$(“#dg”).datagrid(‘getChanges’,”deleted”);//获取删除的行
$(“#dg”).datagrid(‘getChanges’,”updated”);//获取修改的行
$(‘#dg’).datagrid(‘getChanges’);
$(‘#dg’).datagrid(‘validateRow’, editIndex);//重回bool 值,用来验证选项

DataGrid

1. datagrid editor取值/赋值:

//以numberbox为例

//1. 取值

vared=$(‘#cjlr_dg’).datagrid(‘getEditor’,
{index:index,field:field});

varpscj_oldValue=$(ed.target).numberbox(‘getValue’);

//2. 赋值

$(ed.target).numberbox(‘setValue’,0);

明天说下基于datagrid框架的去除、添加与修改:
前天说下批量去除,双击表单修改、选中央银行修改,扩大行修改,再有便是增添editor的点子,无需废话,直接上代码,代码中的注释写的很详细:

$(‘#dg’).datagrid(‘appendRow’,{status:’P’});
$(‘#dg’).datagrid(‘selectRow’,index);
$(‘#dg’).datagrid(‘deleteRow’,index);
$(‘#dg’).datagrid(‘updateRow’, {
index: index,
row: {}
});

  继承自 $.fn.panel.defaults,覆盖暗中同意值 $.fn.datagrid.defaults.

二. 2个1体化的实际业绩表格编辑功用;编辑实现后将新型的值存款和储蓄到后台;

 · 假如从前有值,清空之后,回车,将呈现以前的值;

 ·  假使从前无值,清空之后,回车,将呈现“为录入”;

 ·  借使在此之前有值,改变值之后,回车,将突显最新改变的值;

 ·  用到的小知识点:

(一)、将数值转换为整数:parseInt(zcj)

(2)、将数值转换为带1个人小数的数值:parseFloat(zcj).toFixed(1)

(三)、安慕希表明式: 条件 ? 条件建立履行此语句 :条件不创制履行此语句;

(四)、字符串截取:str.subString(一,10); –
截取的为str的索引值从一到玖里边的字符(索引值是从0起首的);

(伍)、将字符转为数组:str.split(“,”);  – 以逗号为分割点,转换为数组;

//datagrid editor –
点击上键表示“+一”,点击下键表示“-一”,点击回车表示“编辑完毕”;

//定义命名空间对象,因为页面较多,防止争辩

nameSpace.ns(“CJGL.cjlr”);

CJGL.cjlr = {

    //定义此命名空间对象中的全数全局变量

bl: {

cjlr_grade_Name: ”,

cjlr_grade_value: 0

},

init: function(){//开始化函数

var dg = $(‘#cjlr_dg’).datagrid({//给datagrid组件赋值

url: “/cjlrxsxx/getStudents”,

queryParams: { … },

    onLoadSuccess: function(data){ … },

onClickCell: function(index,田野先生,value){//当点击datagrid
editor中的单元格时触发此事件

     
//获取特定的编辑器,options参数有1个属性:index:行索引。田野(field):字段名。

var ed = $(‘#cjlr_dg’).datagrid(‘getEditor’,
{index:index,field:field});

//获取编辑框的值

var pscj_oldValue = $(ed.target).numberbox(‘getValue’);

//将编辑框的字段名存款和储蓄到全局变量中

CJGL.cjlr.bl.cjlr_grade_Name = field;

//获取到编辑框的值是空的依旧有数值,空的的话将“未录入”存入变量中,非空将获得到的编辑框的值存入变量中(当键盘未做别的编辑,将内容清空的时候用到这里变量)

pscj_oldValue == “” ? CJGL.cjlr.bl.cjlr_grade_value = “未录入” :
CJGL.cjlr.bl.cjlr_grade_value = pscj_oldValue;

//键盘上/下/enter事件触发

$(‘.datagrid-editable .textbox,.datagrid-editable
.datagrid-editable-input,.datagrid-editable
.textbox-text’).bind(‘keydown’, function(e){

var code = e.keyCode || e.which;

ed = $(‘#cjlr_dg’).datagrid(‘getEditor’, {index:index,field:field});

//获取编辑框的值;

pscj_oldValue = $(ed.target).numberbox(‘getValue’);

CJGL.cjlr.bl.cjlr_grade_Name = field;

pscj_oldValue == “” ? CJGL.cjlr.bl.cjlr_grade_value = “未录入” :
CJGL.cjlr.bl.cjlr_grade_value = pscj_oldValue;

if(code == 一3){//回车键 – 甘休编辑

$(‘#cjlr_dg’).datagrid(‘acceptChanges’);

$(‘#cjlr_dg’).datagrid(‘endEdit’, index);

}else if(code == 38){//上键 – 加1

if(!pscj_oldValue){

$(ed.target).numberbox(‘setValue’,0);

pscj_oldValue = $(ed.target).numberbox(‘getValue’);

}

var newValue_cj = parseInt(pscj_oldValue) + 1;

$(ed.target).numberbox(‘setValue’,newValue_cj);

return false;

}else if(code == 40){//下键 – 减1

var newValue_cj = parseInt(pscj_oldValue) – 1;

$(ed.target).numberbox(‘setValue’,newValue_cj);

return false;

}

});

},

onAfter艾德it: function(index,row,changes){//甘休编辑

        CJGL.cjlr.bl.cjlrxsxxId = row.openid;

if(JSON.stringify(changes).length >贰){//改变了值

var changeValue = JSON.stringify(changes);

var changeName = changeValue.substring(1,
changeValue.length-1).split(“:”)[0].replace(/\”/g, “”);

var changeText = changeValue.substring(1,
changeValue.length-1).split(“:”)[1].replace(/\”/g, “”);

if(changeText.length == 0){//录入值为空 – 填入”未录入”或事先数值

row[CJGL.cjlr.bl.cjlr_grade_Name] =
CJGL.cjlr.bl.cjlr_grade_value;

//更新表格

$(‘#cjlr_dg’).datagrid(‘updateRow’,{

index: index,

row: row

});

$(‘#cjlr_dg’).datagrid(‘refreshRow’, index);

}else{//改变的值为非空,有数值

//是还是不是保留一个人小数,来判断单元格的值的格式;

row.sfblywxs == 1 ? (row[changeName] =
parseFloat(changeText).toFixed(1)) : (row[changeName] =
parseInt(changeText));

row.pscj == “未录入” ? (row.sfblywxs == 1 ? row.pscj = 0.0 : row.pscj
= 0) : (row.sfblywxs == 1 ? row.pscj = parseFloat(row.pscj) : row.pscj
= parseInt(row.pscj));

row.kscj == “未录入” ? (row.sfblywxs == 1 ? row.kscj = 0.0 : row.kscj
= 0) : (row.sfblywxs == 1 ? row.kscj = parseFloat(row.kscj) : row.kscj
= parseInt(row.kscj));

//总战表 = 3/5的考试战绩 + 四成的平常成绩;

var zcj = row.kscj * 0.6 + row.pscj * 0.4;

row.sfblywxs == 1 ? zcj = parseFloat(zcj).toFixed(1) : zcj =
parseInt(zcj);

row.cjzfs = zcj;

//更新修改过的单元行

$(‘#cjlr_dg’).datagrid(‘updateRow’,{

index: index,

row: row

});

$(‘#cjlr_dg’).datagrid(‘refreshRow’, index);

//保存日常战表/考试战表

CJGL.cjlr.save(row.pscj, row.kscj);

}

$(‘#cjlr_dg’).datagrid(‘updateRow’,{

index: index,

row: row

});

$(‘#cjlr_dg’).datagrid(‘refreshRow’, index);

//保存日常战绩/考试成绩

if(row.pscj<0 || row.kscj<0){

$.messager.alert(‘提示消息’,’请录入正确的战绩分数!’);

$(‘#cjlr_dg’).datagrid(“reload”);

}else{

CJGL.cjlr.save(row.pscj, row.kscj);

}

}

}

});

dg.datagrid(‘enableCell艾德iting’);//让表格拥有编辑功能;

$(function(){

CJGL.cjlr.init();//调用页面起先化函数;

});

<script type=”text/javascript” charst=”utf-八”>var editFlag =
undefined;//设置一个编辑标记
   
//因为layout框架指向href时,只取html页面body中间的1些,所以该页面那样写即可
    //有datagrid包涵属性较多,所以尽大概采用js的措施发轫化datagrid框架
    $(function () {
        $(“#dg”).datagrid({
            url: “GetJson.ashx”,
//指向3个形似处理程序可能二个控制器,再次回到数据供给是Json格式,间接赋值Json格式数据也可,作者以demo中自带的Json数据为例,就不写后台代码了,可是笔者会说下后台重回的注意事项
            iconCls: “icon-add”,
            fitColumns: false,
//设置为true将电动使列适应表格宽度以幸免出现水平滚动,false则自动匹配大小
            //toolbar设置表格顶部的工具栏,以数组方式设置
            idField: ‘id’,
//标识列,1般设为id,可能会有别轻重缓急写,我们小心一下
            loadMsg: “正在着力为您加载数据”,
//加载数据时向用户展示的讲话
            pagination: true, //呈现最下端的分页工具栏
            rownumbers: true, //展现行数 一,二,叁,四…
            pageSize: 十, //读取分页条数,即向后台读取数据时传过去的值
            pageList: [10, 20, 30],
//能够调整每页展现的多寡,即调动pageSize每一遍向后台请求数据时的数据
           
//由于datagrid的性质过多,作者就不每一种都介绍了,如有要求,可以看它的API
            sortName: “name”, //初步化表格时依照的排序 字段
必须和数据库中的字段名称相同
            sortOrder: “asc”, //正序
            columns: [[
                {
                    field: ‘code’, title: ‘Code’, width: 100,
                    editor: {//设置其为可编写制定
                        type: ‘validatebox’,//设置编辑样式
自带样式有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree
可自动扩大
                        options: {}
                    }
                },
                {
                    field: ‘name’, title: ‘Name’, width: 100, sortable:
true,
                    editor: {//设置其为可编写制定
                        type: ‘validatebox’,//设置编辑格式
                        options: {
                            required: true//设置编辑规则属性
                        }
                    }
                },//sortable:true点击该列的时候能够更改升降序
                {
                    field: ‘addr’, title: ‘addr’, width: 100,
                    editor: {//设置其为可编写制定
                        type:
‘datetimebox’,//那里我们将举行3个datetimebox的扩充
                        options: {
                            required: true//设置编辑规则属性
                        }
                    }
                }
           
]],//那里之所以有五个方括号,是因为能够做成水晶报表格局,具体可看demo
            toolbar: [{//在dategrid表单的底部添加按钮
                text: “添加”,
                iconCls: “icon-add”,
                handler: function () {
                    if (editFlag != undefined) {
                        $(“#dg”).datagrid(‘end艾德it’,
editFlag);//甘休编辑,传入从前编辑的行
                    }
                    if (editFlag == undefined)
{//幸免同时开辟过多添加行
                        $(“#dg”).datagrid(‘insertRow’,
{//在内定行添加数据,appendRow是在结尾1行添加多少
                            index: 0,    // 行数从0初步总括
                            row: {
                                code: ”,
                                name: ‘请输入姓名’,
                                addr: ”
                            }
                        });
                        $(“#dg”).datagrid(‘begin艾德it’,
0);//开启编辑并传播要编写的行
                        editFlag = 0;
                    }
                }
            }, ‘-‘, {//’-‘正是在八个按钮的中级加一个竖线分割,望着舒心
                text: “删除”,
                iconCls: “icon-remove”,
                handler: function () {
                    //选中要去除的行
                    var rows = $(“#dg”).datagrid(‘getSelections’);
                    if (rows.length > 0) {//选中几行的话触发事件
                        $.message.confirm(“提醒”,
“您明确要去除那几个数量吧?”, function (res) {//提示是或不是删除
                            if (res) {
                                var codes = {};
                                for (var i = 0; i < rows.length; i++)
{
                                    codes.push(rows[i].code);
                                }
                               
console.info(codes.join(‘,’));//拼接字符串并传递到后台处理数量,循环删除,成功后刷新datagrid
                            }
                        });
                    }
                }
            }, ‘-‘, {
                text: “修改”,
                iconCls: “icon-edit”,
                handler: function () {
                    //选中一行举办编写制定
                    var rows = $(“#dg”).datagrid(‘getSelections’);
                    if (rows.length == 一) {//选中壹行的话触发事件
                        if (editFlag != undefined) {
                            $(“#dg”).datagrid(‘end艾德it’,
editFlag);//甘休编辑,传入在此之前编辑的行
                        }
                        if (editFlag == undefined) {
                            var index =
$(“#dg”).datagrid(‘getRowIndex’, rows[0]);//获取选定行的目录
                            $(“#dg”).datagrid(‘begin艾德it’,
index);//开启编辑并传播要编写制定的行
                            editFlag = index;
                        }
                    }
                }
            }, ‘-‘, {
                text: “保存”,
                iconCls: “icon-save”,
                handler: function () {
                    $(“#dg”).datagrid(‘endEdit’, editFlag);
                }
            }, ‘-‘, {
                text: “撤销”,
                iconCls: “icon-redo”,
                handler: function () {
                    editFlag = undefined;
                    $(“#dg”).datagrid(‘rejectChanges’);
                }
            }, ‘-‘]JQueryEasyUI学习笔记,回车键自定义。,
            onAfter艾德it: function (rowIndex, rowData, changes)
{//在添加达成end艾德it,保存时接触
               
console.info(rowData);//在火狐浏览器的主宰台下可看出传递到后台的数量,那里咱们就能够运用这一个数据异步到后台添加,添加完毕后,刷新datagrid
                editFlag = undefined;//重置
            }, onDblClickCell: function (rowIndex, 田野同志, value)
{//双击该行修改内容
                if (editFlag != undefined) {
                    $(“#dg”).datagrid(‘end艾德it’,
editFlag);//停止编辑,传入以前编辑的行
                }
                if (editFlag == undefined) {
                    $(“#dg”).datagrid(‘begin艾德it’,
rowIndex);//开启编辑并传播要编写的行
                    editFlag = rowIndex;
                }
            }
        });
    });

$(‘#dg’).datagrid(‘beginEdit’, getRowIndex(target));
$(‘#dg’).datagrid(‘endEdit’, getRowIndex(target));
$(‘#dg’).datagrid(‘cancelEdit’, getRowIndex(target));

 

    //点击查找按钮出发事件
    function searchFunc() {
        alert(“123”);
        $(“#dg”).datagrid(“load”,
sy.serializeObject($(“#searchForm”).form()));//将searchForm表单内的成分体系为对象传递到后台
       
//这里介绍reload的运用,使用reload时,会暗中认可记住当前页面,当点击查询时,假使大家查到的数量只有三条,大家每页展现10挑数据,当前页码是贰,那么大家将不或者在当前页面看到大家询问出的结果,唯有将页面向前跳转才会看到,可是用load就不会油可是生那种气象
    }

 

    //点击清空按钮出发事件
    function clearSearch() {
        $(“#dg”).datagrid(“load”,
{});//重新加载数据,无填写数据,向后台传递值则为空
       
$(“#searchForm”).find(“input”).val(“”);//找到form表单下的具备input标签并清空
    }
</script>
<div class=”easyui-tabs” fit=”true” border=”false”>
    <div title=”数据突显表格” border=”false” fit=”true”>
        <div class=”easyui-layout” fit=”true” border=”false”>
           
<!–由于查询须要输入条件,但是以toolbar的款型不好,所以我们在Layout框架的头顶north中书写查询的相干新闻–>
            <!–
那里大家尽量使其出示的体制与toolbar的体制相似,所以我们先物色toolbar的体裁,并复制过来–>
            <div data-options=”region:’north’,title:’高级查询'”
style=”height: 拾0px; background: #F4F4F4;”>
                <form id=”searchForm”>
                    <table>
                        <tr>
                            <th>用户姓名:</th>
                            <td>
                                <input name=”name” /></td>
                        </tr>
                        <tr>
                            <th>创设起来时间</th>
                            <td>
                                <input class=”easyui-datetimebox”
editable=”false” name=”subStartTime” /></td>
                           
<!–由于datebox框架下边包车型地铁多少必须是时刻格式的,所以我们用editable=”false”来禁止用户手动输入,防止报错–>
                            <th>创造甘休时间</th>
                            <td>
                                <input class=”easyui-datetimebox”
editable=”false” name=”nsubEndTimeame” /></td>
                            <td><a class=”easyui-linkbutton”
href=”javascript:void(0);”
onclick=”searchFunc();”>查找</a></td>
                            <td><a class=”easyui-linkbutton”
href=”javascript:void(0);”
onclick=”clearSearch();”>清空</a></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div data-options=”region:’center’,split:false”>
                <table id=”dg”>
                </table>
            </div>
        </div>
    </div>
</div>

 

扩展editor方法:datetimebox

  DataGrid控件展现数据以表格的样式提供了充分的精选,帮忙排序,组和编写制定数据。

 $(function () {
        /*扩展Editors的datetimebox方法*/
        $.extend($.fn.datagrid.defaults.editors, {
            datetimebox: {//为方法取名
                init: function (container, options) {
                    var editor = $(‘<input
/>’).appendTo(container);
                    options.editable = false;//设置其不能够手动输入
                    editor.datetimebox(options);
                    return editor;
                },
                getValue: function (target) {//取值
                    return $(target).datetimebox(‘getValue’);
                },
                setValue: function (target, value) {//设置值
                    $(target).datetimebox(‘setValue’, value);
                },
                resize: function (target, width) {
                    $(target).datetimebox(‘resize’, width);
                },
                destroy: function (target) {
                    $(target).datetimebox(‘destroy’);//销毁生成的panel
                }
            }
        });
    });

 

图示:

  DataGrid控件被规划来压缩费用时间和供给开发商并未有特定的知识。它是轻量级的和效率丰富的。合并单元格,多列标题,冻结列和页脚是仅部分几天性状。

 

 

4858美高梅 1

 

 

 

昨天说下批量刨除,双击表单修改、选中央银行修改,扩展行修改,再有正是扩大editor的办法,…

 

[依赖于]

 

panel

resizable

linkbutton

pagination

 

[应用实例]

在HTML标签中,从现有的成分创制表成分、定义列、行中的数据:

 

复制代码

 1 <table class=”easyui-datagrid”>  

 2     <thead>  

 3         <tr>  

 4             <th data-options=”field:’code'”>Code</th>  

 5             <th data-options=”field:’name'”>Name</th>  

 6             <th data-options=”field:’price'”>Price</th>  

 7         </tr>  

 8     </thead>  

 9     <tbody>  

10         <tr>  

11            
<td>001</td><td>name1</td><td>2323</td>
 

12         </tr>  

13         <tr>  

14            
<td>002</td><td>name2</td><td>4612</td>
 

15         </tr>  

16     </tbody>  

17 </table>  

复制代码

 

 

透过<table>标签创造DataGrid,在table表格里嵌套<th>标签定义。

 

复制代码

 1 <table class=”easyui-datagrid” style=”width:400px;height:250px”  

 2        
data-options=”url:’datagrid_data.json’,fitColumns:true,singleSelect:true”>
 

 3     <thead>  

 4         <tr>  

 5             <th
data-options=”field:’code’,width:100″>Code</th>  

 6             <th
data-options=”field:’name’,width:100″>Name</th>  

 7             <th
data-options=”field:’price’,width:100,align:’right'”>Price</th>
 

 8         </tr>  

 9     </thead>  

10 </table>  

复制代码

 

 

使用Javascript也能够创建DataGrid:

 

1 <table id=”dg”></table>  

复制代码

1 $(‘#dg’).datagrid({   

2     url:’datagrid_data.json’,   

3     columns:[[   

4         {field:’code’,title:’Code’,width:100},   

5         {field:’name’,title:’Name’,width:100},   

6         {field:’price’,title:’Price’,width:100,align:’right’}   

7     ]]   

8 });  

复制代码

 

 

行使一些参数查询数据:

 

1 $(‘#dg’).datagrid(‘load’, {   

2     name: ‘easyui’,   

3     address: ‘ho’  

4 });  

 

 

更改多少到服务器后,更新在此之前的数目:

 

1 $(‘#dg’).datagrid(‘reload’);    // 重新加载当前页的数据 

 

 

[DataGrid 属性]

本性持续自 panel 面板,上边是从 panel 新增的性质列表:

 

名称 类型

描述 默认值

columns
array
DataGrid列的布局对象,更加多详细请参见列属性。 undefined

frozenColumns
array
相同列的习性,但是那个列会被冷冻在左边。 undefined

fitColumns
boolean
为“true”则自动 展开/减弱列的尺寸,为了活动填充Grid的宽窄,制止出现水平滚动条。 false

autoRowHeight
boolean
定义是不是基于行的剧情设置行高,设置“false”能够抓实加载质量。 true

toolbar
array,selector DataGrid面板顶部的 ToolBar
工具条,能够设置的值如下:

一) 三个数组,每种options项是一模一样的LinkButton。

2) 一个 selector 选择器 指定 ToolBar 工具条。

采纳<div>标签定义 ToolBar 工具条:

 

复制代码

 1 $(‘#dg’).datagrid({

 2     toolbar: ‘#tb’

 3 });

 4 <div id=”tb”>

 5   <a href=”#” 

 6       class=”easyui-linkbutton” 

 7       data-options=”iconCls:’icon-edit’,plain:true”></a>

 8   <a href=”#” 

 9       class=”easyui-linkbutton” 

10       data-options=”iconCls:’icon-help’,plain:true”></a>

11 </div>

复制代码

 

 

通过数组定义 ToolBar:

 

复制代码

1 $(‘#dg’).datagrid({

2     toolbar: [{

3         iconCls: ‘icon-edit’,

4         handler: function(){alert(‘edit’)}

5     },’-‘,{

6         iconCls: ‘icon-help’,

7         handler: function(){alert(‘help’)}

8     }]

9 });

复制代码

null

striped
boolean
设置“True”完成各行变色的效果。 false

method
string
那一个点子必要中远距离数据类型。 post

nowrap
boolean
设置为“True”则将数据显示在一行内,设置为“True”能够抓牢加载质量。 true

idFieldstring
钦点哪些字段是标识字段。 null

url
string
2个用以请求远程站点的U帕杰罗L路径。 null

loadMsg
string
当从远程站点加载数据时,展现二个提醒消息。 Processing,
please wait …

pagination
boolean
设置为“True”则在DataGrid尾巴部分呈现分页工具条按钮。 false

rownumbers
boolean
设置为“True”则展现行数列。 false

singleSelect
boolean
设置为“True”则只允许选取①行。 false

checkOnSelect
boolean

设若设置为“True”,当用户点击一行时 选中/撤销选中 该复选框。

 

倘使设置为“False”,当用户准确点击复选框时,选中/裁撤选中 该复选框。

这些脾性时一.3版本之后可用的。

 

true

selectOnCheck
boolean

若果设置为True,点击复选框将总会采用行。

 

假诺设置为False,选中央银行将不会选中该复选框。

其一性格在一.三本子后可用。

 

true

pagePosition
string
定义分页工具条的地点,有效值是:’top’,’bottom’,’both’。

本条性子在1.3版本后可用。 bottom

pageNumber
number
当设置分页的品质时,开首化页面数量。 一

pageSize
number
当设置分页属性时,先河化页面大小。 10

pageList
array
当设置分页属性时,开端化页面大小选拔列表、
[10,20,30,40,50]

queryParams
object
当请求远程数据时,附带发送额外的参数。

代码示例:

 

1 $(‘#dg’).datagrid({

2     queryParams: {

3         name: ‘easyui’,

4         subject: ‘datagrid’

5     }

6 });

{}

sortName
string
定义哪些列可以被排序。 null

sortOrder
string
定义列的排序方式,只好是升序“asc”或降序“desc”。 asc

remoteSort
boolean
定义是不是接受来自远程服务器的排序数据。 true

showHeader
boolean
定义是或不是出示行的页眉。 true

showFooter
boolean
定义是或不是出示行的页脚。 false

scrollbarSize
number
滚动条的款(当是垂直滚动条时) 或许 高(当是水平滚动条的时候) 18

rowStyler
function
重回例如 ‘background:red’ 1样的品格样式,那个格局带四个参数:

rowIndex: 行的下标索引,从0早先

rowData: 符合记录数的行

代码示例:

 

复制代码

1 $(‘#dg’).datagrid({

2     rowStyler: function(index,row){

3         if (row.listprice>80){

4             return ‘background-color:#6293BB;color:#fff;’;

5         }

6     }

7 });

复制代码

 

loader
function

概念怎么样从远程服务器加载数据,重临“false”能够告1段落这几个请求。

 

其壹函数必要以下参数:

param: 向远程服务器传递的参数对象。

success(data): 这几个回调函数会在寻觅数据成功后调用。

error(): 那几个函数会在搜寻数据退步时调用。

 

json loader

loadFilter
function

来得重回过滤后的数量。那么些函数带1个参数 ‘data’,它代表原本数据。

 

您能够将原来数据源更改为行业内部的多寡格式。

 

那一个函数必须再次来到3个蕴涵“total”和“rows”属性的正式数量对象。

 

代码示例:

 

复制代码

 一 // 从 ASP.NET Web Service Json 输出中剔除“d”对象

 2 $(‘#dg’).datagrid({

 3     loadFilter: function(data){

 4         if (data.d){

 5             return data.d;

 6         } else {

 7             return data;

 8         }

 9     }

10 });

复制代码

 

editors
object
定义编辑行时的编辑器。 predefined editors

view
object
定义DataGrid的View视图。 default view

 

 

 

 

 

 

 

[4858美高梅 ,列属性]

DataGrid的列是一个数组对象,它的要素也是2个数组。成分的成分数组是一个布署对象,它定义了每一列的字段。

 

 

 

代码示例:

 

复制代码

 1 columns:[[   

 2     {field:’itemid’,title:’Item
ID’,rowspan:2,width:80,sortable:true},   

 3     {field:’productid’,title:’Product
ID’,rowspan:2,width:80,sortable:true},   

 4     {title:’Item Details’,colspan:4}   

 5 ],[   

 6     {field:’listprice’,title:’List
Price’,width:80,align:’right’,sortable:true},   

 7     {field:’unitcost’,title:’Unit
Cost’,width:80,align:’right’,sortable:true},   

 8     {field:’attr1′,title:’Attribute’,width:100},   

 9     {field:’status’,title:’Status’,width:60}   

10 ]]  

复制代码

名称
类型
描述
默认值

title
string
列的标题文本。 undefined

田野同志string
列的字段名称。 undefined

width
number
列的宽窄,假使未有概念,宽度将会自动扩张以包容其内容。 undefined

rowspan
number
代表应当占据多少行。 undefined

colspan
number
代表应当占据多少列。 undefined

align
string
表示什么排列对齐列数据,能够用的值有:’left’,’right’,’center’。 undefined

sortable
boolean
设置为“True”则钦定列能够排序。 undefined

resizable
boolean
设置为“True”则足以调整列的轻重缓急。 undefined

hidden
boolean
设置为“True”则隐藏列。 undefined

checkbox
boolean
设置为“True”则呈现三个复选框,该复选框有一定的涨幅。 undefined

formatter
function
单元格格式化的函数,带有四个参数:

value: 字段值

rowData: 行数据记录

rowIndex: 行下标

代码示例:

 

复制代码

 1 $(‘#dg’).datagrid({

 2     columns:[[

 3         {field:’userId’,title:’User’, width:80,

 4             formatter: function(value,row,index){

 5                 if (row.user){

 6                     return row.user.name;

 7                 } else {

 8                     return value;

 9                 }

10             }

11         }

12     ]]

13 });

复制代码

undefined

styler
function
单元格样式函数,再次回到例如 ‘background:red’
一样的用户自定义的体裁字符串。那些函数带有四个参数:

value: 字段值

rowData: 行数据记录

rowIndex: 行下标

代码示例:

 

复制代码

 1 $(‘#dg’).datagrid({

 2     columns:[[

 3         {field:’listprice’,title:’List Price’, width:80,
align:’right’,

 4             styler: function(value,row,index){

 5                 if (value < 20){

 6                     return ‘background-color:#ffee00;color:red;’;

 7                 }

 8             }

 9         }

10     ]]

11 });

复制代码

undefined

sorter
function
用来做一些排序的自定义字段的排序作用,带有多少个参数:

a: 首个字段值

b: 第四个字段值

代码示例:

 

复制代码

 1 $(‘#dg’).datagrid({

 2     remoteSort: false,

 3     columns: [[

 4        
{field:’date’,title:’Date’,width:80,sortable:true,align:’center’,  

 5             sorter:function(a,b){  

 6                 a = a.split(‘/’);  

 7                 b = b.split(‘/’);  

 8                 if (a[2] == b[2]){  

 9                     if (a[0] == b[0]){  

10                         return (a[1]>b[1]?1:-1);  

11                     } else {  

12                         return (a[0]>b[0]?1:-1);  

13                     }  

14                 } else {  

15                     return (a[2]>b[2]?1:-1);  

16                 }  

17             }  

18         }

19     ]]

20 });

复制代码

undefined

editor
string,object
展现编辑类型,当字符串指明了编写制定类型,对象涵盖两性子子:

type:
string,编辑的项目,能够是的值:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.

options: object, 对应于编辑类型的编写制定器选项。 undefined

 

 

 

 

 

 

 

Editor

重写暗中认可值 $.fn.datagrid.defaults.editors.

 

 

 

每种 editor 编辑器都有以下行为:

 

名称
参数
描述

init
container, options 开端化 Editor 编辑器,并赶回指标对象。

destroy
target
假使有至关重要则摧毁 艾德itor 编辑器。

getValue
target
从 艾德itor 编辑器获取数据值。

setValue
target , value 设置 Editor 编辑器的数据值。

resize
target , width 要是须求则调整 艾德itor 编辑器。

比如说,在艾德itor编辑器中如下概念:

 

复制代码

 1 $.extend($.fn.datagrid.defaults.editors, {   

 2     text: {   

 3         init: function(container, options){   

 4             var input = $(‘<input type=”text”
class=”datagrid-editable-input”>’).appendTo(container);   

 5             return input;   

 6         },   

 7         getValue: function(target){   

 8             return $(target).val();   

 9         },   

10         setValue: function(target, value){   

11             $(target).val(value);   

12         },   

13         resize: function(target, width){   

14             var input = $(target);   

15             if ($.boxModel == true){   

16                 input.width(width – (input.outerWidth() –
input.width()));   

17             } else {   

18                 input.width(width);   

19             }   

20         }   

21     }   

22 });  

复制代码

 

 

 

 

 

[DataGrid View]

重写私下认可值:$.fn.datagrid.defaults.view.

 

该视图是三个对象,它会告诉DataGrid中如何显示行。该目的必须定义了须臾间作用函数:

 

名称
参数
描述

render
target, container, frozen 数据加载时调用。

target: Dom对象,DataGrid对象。

container: 行容器。

frozen: 表示是还是不是彰显冻结容器。

renderFooter
target, container, frozen 这是3个可选的效用,显示页脚。

renderRow
target, 田野s, frozen, rowIndex, rowData
那是二个可选的效果,函数将会被render调用。

refreshRow
target, rowIndex 定义怎样刷新钦定的行。

onBeforeRender
target, rows
视图Render前触发。

onAfterRender
target
视图在Render后触发。

[事件]

以此日子继续自 panel 面板,一下是DataGrid另增的风浪:

 

名称
参数
描述

onLoadSuccess
data
数据加载时接触。

onLoadError
none
当加载远程数据时发出局地错误的时候接触。

onBeforeLoad
param
在1个请求加载数据从前接触,要是回到“false”则裁撤加载操作。

onClickRow
rowIndex, rowData 当用户点击1行时接触,那么些参数包含:

rowIndex: 单击行的目录,从0开始。

rowData: 对应单击的行记录

onDblClickRow
rowIndex, rowData 当用户双击行时触发,那么些参数包涵:

rowIndex: 单击行的目录,从0开首。

rowData: 对应点击的行记录

onClickCell
rowIndex, 田野(field), value 当用户点击单元格时触发。

onDblClickCell
rowIndex, 田野, value 当用户双击单元格时触发。

代码示例:

 

复制代码

一 // 当双击2个单元格时,赋予艾德itor编辑器核心,以开端编写制定

2 $(‘#dg’).datagrid({

3     onDblClickCell: function(index,field,value){

4         $(this).datagrid(‘beginEdit’, index);

5         var ed = $(this).datagrid(‘getEditor’,
{index:index,field:field});

6         $(ed.target).focus();

7     }

8 });

复制代码

onSortColumn
sort, order
当用户排序一列时接触,这一个参数包含:

sort: 排序的列的字段名称

order: 排连串的一壹

onResizeColumn
田野同志, width
当用户调整列大小时触发。

onSelect
rowIndex, rowData 当用户挑选一行时接触,那么些参数包蕴:

rowIndex: 选取行的目录,从0初叶

rowData: 对应着所选择的行记录

onUnselect
rowIndex, rowData 当用户撤废采取行时触发,那些参数包罗:

rowIndex: 撤废接纳的行下标,从0起始

rowData: 对应的裁撤选取的行记录。

onSelectAll
rows
当用户挑选具有行时触发。

onUnselectAll
rows
当用户撤除选中全体行时触发。

onCheck
rowIndex,rowData 当用户勾选一行时接触,这么些参数包罗:

rowIndex: 勾选的行下标,从0初步

rowData: 对应着勾选的行记录

其一事件在一.叁本子后灵光。

onUncheck
rowIndex,rowData 当用户撤废勾选1行时接触,那几个参数包括:

rowIndex: 撤消选中的行下标,从0初叶

rowData: 废除选中的行记录

这一个事件在一.三本子后生效

onCheckAll
rows
当用户勾选全体行时触发,那个事件在一.三版本后灵光。

onUncheckAll
rows
当用户废除勾选全数行时触发,那些事件在一.三版本后生效

onBefore艾德it
rowIndex, rowData 当用户开首编写制定一行时接触,那一个参数包蕴:

rowIndex: 编辑行的下标,从0伊始

rowData: 对应着编辑的行记录

onAfter艾德it
rowIndex, rowData, changes 当用户完结编写制定时触发,那个参数包蕴:

rowIndex: 编辑的行下标,从0先导

rowData: 编辑的行记录

changes: 更改的 字段/值 对。

onCancelEdit
rowIndex, rowData 当用户撤除编辑壹行时接触,这一个参数包蕴:

rowIndex: 编辑的行下标,从0起初

rowData: 对应着编辑的行记录

onHeaderContextMenu
e, 田野当DataGrid的标题是右键点击时接触。

onRowContextMenu
e, rowIndex, rowData 当行时右键点击时接触。

[方法]

名称
参数
描述

options
none
重返options选项对象。

getPager
none
再次回到paper页面对象。

getPanel
none
重临panel面板对象、

getColumnFields
frozen
重回列字段。借使冻结设置为true,则冻结列字段重返。

代码示例:

1 var opts = $(‘#dg’).datagrid(‘getColumnFields’);    // 获取非冻结列

2 var opts = $(‘#dg’).datagrid(‘getColumnFields’, true); // 获取冻结列

getColumnOption
field重返内定列的选项option设置。

resize
param
做调整,做布局。

load
param

加载并出示在第三页的行,即便‘param’内定了,那么它便会趁着QueryParams属性取代。

 

平时经过传递二个参数做3个询问,这么些办法能够改为从服务器加载新数据。

 

1 $(‘#dg’).datagrid(‘load’,{

2     code: ’01’,

3     name: ‘name01’

4 });

reload
param
重新加载行,和“load”方法同样,可是停留在此时此刻页面。

reloadFooter
footer
重新加载页脚行,代码示例:

复制代码

 1 // update footer row values and then refresh

 2 var rows = $(‘#dg’).datagrid(‘getFooterRows’);

 3 rows[0][‘name’] = ‘new name’;

 4 rows[0][‘salary’] = 60000;

 5 $(‘#dg’).datagrid(‘reloadFooter’);

 6 

 7 // update footer rows with new data

 8 $(‘#dg’).datagrid(‘reloadFooter’,[

 9     {name: ‘name1’, salary: 60000},

10     {name: ‘name2’, salary: 65000}

11 ]);

复制代码

loading
none
展现加载状态。

loaded
none
隐藏加载状态。

fitColumns
none
使列自动 展开/缩短 以适应网格的上涨幅度。

fixColumnSize
田野同志固定列的大下,假若‘田野’参数未有被分配,则装有列大小都将是定位的。

代码示例:

 

1 $(‘#dg’).datagrid(‘fixColumnSize’, ‘name’);  // 固定‘name’列的高低

2 $(‘#dg’).datagrid(‘fixColumnSize’);  // 固定全部列大小

fixRowHeight
index
固定钦定的行高,借使“index”参数未有分配,则持有行高都将是一定的。

autoSizeColumn
field调整列宽度以适应其情节,这些艺术在一.三版本之后可用。

loadData
data
加载本地数据,旧的行会被剔除。

getData
none
再次回到加载的多少。

getRows
none
重回当前页的行。

getFooterRows
none
再次来到页脚行。

getRowIndex
row
再次回到钦赐行的目录,row行参数能够是贰个行记录或1个id字段值。

getChecked
none
再次来到复选框被选中的富有行,这些艺术在一.三版本后可用。

getSelected
none
重临第叁个选定行的笔录或null。

getSelections
none
重临全体选定的行,当未有入选记录的时候,将回来二个空数组。

clearSelections
none
清除全数的挑选。

selectAll
none
采纳当前页面全体的行。

unselectAll
none
废除选取当前页面包车型客车有所行。

selectRow
index
选用一行,行下标从0开首。

selectRecord
idValue
通过id值参数选中1行。

unselectRow
index
撤销选中央银行。

checkAll
none
当选当前页面全体行,那个措施从一.三版本之后可用。

uncheckAll
none
撤废选中当前页全数行,那个法子从1.三本子之后可用。

checkRow
index
选中一行,行下标从0开端,这些措施从一.三本子之后可用。

uncheckRow
index
打消选中1行,行下标从0早先,该办法从一.叁本子之后可用。

beginEdit
index
开头编辑行。

end艾德it
index
停止编辑行。

cancel艾德it
index
打消编辑行

get艾德itors
index
获得钦命的行编辑器,每一种编辑器具有以下属性:

actions: 该编辑器能够做的action动作,和编辑器定义一样。

target: 目标编辑器的jQuery对象。

田野(field): 字段名称。

type: 编辑器类型,例如’text’,’combobox’,’datebox’, 等.

getEditor
options
获得钦赐的编辑器,该采纳包蕴两特性子:

index: 行下标索引

田野同志: 字段名称

代码示例:

 

一 // 收获 DateBox 编辑器,并且更改它的值

2 var ed = $(‘#dg’).datagrid(‘getEditor’, {index:1,field:’birthday’});

3 $(ed.target).datebox(‘setValue’, ‘5/4/2012’);

refreshRow
index
刷新行。

validateRow
index
验证内定的行,重返“true”时有效。

updateRow
param
更新内定的行,该参数包罗以下属性:

index: 要更新的行下标索引。

row: 新行的多少。

代码示例:

 

复制代码

1 $(‘#dg’).datagrid(‘updateRow’,{

2     index: 2,

3     row: {

4         name: ‘new name’,

5         note: ‘new note message’

6     }

7 });

复制代码

appendRow
row
拼接3个新行,那几个新行将会被追加在最后的岗位:

1 $(‘#dg’).datagrid(‘appendRow’,{

2     name: ‘new name’,

3     age: 30,

4     note: ‘some messages’

5 });

insertRow
param

插入一个新行,该参数包括以下属性:

index: 要插入新行的下标索引地方,固然未有点名,则在背后拼接新增。

row: 要新增的行数据,

 

代码示例如下:

 

复制代码

1 // 在第①行插入新行

2 $(‘#dg’).datagrid(‘insertRow’,{

3     index: 1,    // index start with 0

4     row: {

5         name: ‘new name’,

6         age: 30,

7         note: ‘some messages’

8     }

9 });

复制代码

deleteRow
index
删除1行。

getChanges
type

获取自从上次交给后的发出更改的行。

 

其一类型参数指明哪些类型变更了行,也许的值如下:inserted,deleted,updated,等.

 

当类型参数未有点名时,重回全体改变的行。

 

acceptChanges
none
提交全体的转移,从它被加载恐怕上次 acceptChanges 被调用。

rejectChanges
none
回滚自其创造后拥有变更的多少,可能从近年来二次 acceptChanges
被调用。

mergeCells
options
合并某些列为2个列,那几个选项包涵以下属性:

index: 行下标

田野先生: 字段名称

rowspan: 要合并的行数

colspan: 要联合的列数

showColumn
field展现钦命的列。

hideColumn
field隐藏钦定的列。

 

继承自 $.fn.panel.defaults,覆盖暗中认可值
$.fn.datagrid.defaults.
DataGrid控件展现数据以表格的款型提供了充足的选项,帮忙排序,组和编排数据…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有