笔记（八）

1.allwidth = document.body.clientWidth;

 var windowCW = document.documentElement.clientWidth;  //窗口视口的宽度

 var n = Math.floor(windowCW/210);  //一行能容纳多少个div，并向下取整

在IE7、IE8、Firefox中，document.body.clientWidth以及 document.body.clientHeightzhi值为0，此时，可以使用 document.documentElement.clientHeight等代替。

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

        // 页面总高度

        var bodyHeight = document.documentElement.offsetHeight;

        // 可视区高度

        var windowHeight = document.documentElement.clientHeight;

        //滚动条的高度    

        var srcollTop = document.documentElement.scrollTop || document.body.scrollTop;

2.easyui datagrid加载数据的三种方式

①加载本地数据

var obj = {"total":2,"rows":[{id:"1",name:"一"},{id:"2",name:"二"}]};   

$('#dg').datagrid('loadData',obj);

注意：这里的数据必须是json对象，要是json字符串，必须先转换成json对象才能作为datagrid的数据源。否则会出现异常：Cannot read property ‘length’ of undefined。

②、加载url方式获取的数据

$('#dg').datagrid({   

    url:'datagrid_data2.json'   

});

③、Html中直接写入

<table id='grid' class='easyui-datagrid' style='width:1100px;height:500px'

            title='用户列表' iconCls='icon-table'  rownumbers='true' fitColumns='true' singleSelect='true' toolbar='#toolbar' >  

        <thead>  

            <tr>  

                <th field='file_name' width='50' align='center'>文件名称</th>  

                <th field='file_txt' width='70'align='center'>文件内容</th>   

                <th field='file_path' width='70' align='center'>存储位置</th> 

            </tr>  

        </thead>  

        <tbody>

            <tr>

                <td>EST-1</td><td>FI-SW-01</td><td>Large</td>

            </tr>

            <tr>

                <td>EST-10</td><td>K9-DL-01</td><td>Spotted Adult Female</td>

            </tr>

        </tbody>

</table>  

3.常用语句

nowrap: false,//数据在一行显示，设置为true，当数据长度超出列宽时将会自动截取。nowrap 属性规定表格单元格中的内容不换行。

striped: true,//行条纹化，设置为true将交替显示行背景。

pagination: true,//是否显示分页，设置true将在数据表格底部显示分页工具栏。

easyui 自适应 fit属性，如果设置了fit=true就会去匹配外层的高宽

rownumbers: true,设置为true将显示行数。

columns数据表格列配置对象，查看列属性以获取更多细节。

frozenColumns跟列属性一样，但是这些列固定在左边，不会滚动。

fitColumns设置为true将自动使列适应表格宽度以防止出现水平滚动。

easyui中idField的作用

官方文档中，给出定义为： 
Indicate which field is an identity field. 
显示哪些字段是一个身份。—–相当于一个主键字段。

定义好idField，才能使用列checkbox，getSelections才能生效，不然只能得到第一个勾选的

idField在treegrid中的是一个必选的属性。在datagrid中是一个可选的属性。

为了方便使用getRowIndex会在datagrid中设置idField属性。

4.Toolbar：数据表格顶部面板的工具栏。可能的值：
1）数组，每个工具选项和链接按钮相同。
2）选择显示的工具栏。
在一个<div>的标签定义工具栏:

$('#dg').datagrid({

toolbar: '#tb'

});

<div id="tb">

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>

</div>

通过数组定义工具栏:

$('#dg').datagrid({

toolbar: [{

iconCls: 'icon-edit',

handler: function(){alert('edit')}

},'-',{

iconCls: 'icon-help',

handler: function(){alert('help')}

}]

});

remoteSort定义是否通过远程服务器对数据排序。

checkOnSelect如果为true，该复选框被选中/取消选中，当用户点击某一行上。如果为false，该复选框仅检查/取消选中，当用户点击完全的复选框。

selectOnCheck如果设置为true，单击一个复选框，将始终选择行。如果为false，不会选择行选中该复选框。