EasyUI of insdep随笔

最新推荐文章于 2023-04-15 17:05:00 发布

原创最新推荐文章于 2023-04-15 17:05:00 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #javascript #ecmascript

前端技术专栏收录该内容

6 篇文章

订阅专栏

本文介绍了EasyUI中数据表格的操作，如刷新、清除缓存及单选设置。还讨论了input框的属性优先级，以及如何实现百分比显示。此外，展示了如何合并行或列以优化页面展示，并提供了数值输入框的使用示例。

日常总结：

1.在用多选框进行删除或其他操作之后，会进行页面刷新，如果不是使用查询方法来刷新列表，必须清除缓存

$('#dg').datagrid('reload');   //刷新页面
$('#dg').datagrid('clearSelections');  //清除原来选中的缓存

onClickRow:function (index, row) {/*只处理当前选中的行*/
    $('#dg').datagrid("unselectAll"); 
	$('#dg').datagrid("selectRow", index);
}

2.给easyUI中的input框赋属性时 js事件中的属性优于内嵌

<input id="cc_department" name="departmentId" data-options="required:true" style="width:280px">

$('#cc_department').combo({
required: false
}});

注：事件中的 required: false 优先于input中的 data-options=“required:true” 所以页面效果显示此项不是必填

3.是否只能单选

singleSelect:false

4.页面展示,合并行或列

            frozenColumns: [[
                {field: 'id', checkbox: true},
                {field:'projectEmployeeName',title:'项目员工',width:80},
                {field:'billMonth',title:'账单年月',width:80},
                {field: 'dataType', title: '数据类型',width:80, halign: 'center', formatter: function (val) {
                        if (val == '1') {
                            return "项目部";
                        } else if (val == '2') {
                            return "社保部";
                        }
                    }}
            ]],
            columns:[
                [
                    {title:'养老保险',colspan:5},
                    {field:'socialSecurityTotal',title:'社保合计',rowspan:2,width:80},
                    {field:'providentFundTotal',title:'公积金合计',rowspan:2,width:80}
                ],[
                    {field:'pensionBase',title:'养老保险基数',width:80,align:'center'},
                    {field:'pensionCompanyRatio',title:'单位比例',width:80,align:'center',
                        formatter: function (value, row) {
                            return value + "%";
                        }
                    },
                    {field:'pensionCompanyMoney',title:'单位应缴',width:80,align:'center'},
                    {field:'pensionPersonalRatio',title:'个人比例',width:80,align:'center',
                        formatter: function (value, row) {
                            return value + "%";
                        }
                    },
                    {field:'pensionPersonalMoney',title:'个人应缴',width:80,align:'center'}

                ]],

页面效果：

需求：输入数字后，自动变为百分比。

实现：

NumberBox（数值输入框）：数值输入框是用来限制用户只能输入数值型数据的。他可以转换一个输入的元素到其他类型，比如：数字、百分比、货币等

使用标签创建数值输入框:

<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input>

使用Javascript创建数值输入框:

<input type="text" id="nn"></input>  
<script type="text/javascript">
$('#nn').numberbox({    
    min:0,    
    precision:2    
});  
</script>

属性：

数值输入框的属性扩展自validatebox(验证框)，数值输入框新增的属性如下：

追加属性：

                        //修改时，派接单不能更改
                        $('#cc_receiveOrder').textbox({
                            readonly:'true'
                        });
                        //先设置只读，后赋值
                        $('#cc_receiveOrder').combo('setValue', row.receiveOrderId).combo('setText', row.receiveOrderName).combo('hidePanel');

只处理当前选中的行

            onClickRow: function (index, row) {/*只处理当前选中的行*/
                $('#dg').datagrid("unselectAll");
                $('#dg').datagrid("selectRow", index);
            }