标签：function false EasyUI title combobox 默认说明使用 true

Datagrid

引入easyui

<link rel="stylesheet" href="../jquery-easyui-1.3.2/themes/default/easyui.css" />
<link rel="stylesheet" href="../jquery-easyui-1.3.2/themes/icon.css" />

<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

使用方式

使用html

<div>
    <table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
           data-options="singleSelect:true,collapsible:true,url:'data.json',method:'get',rownumbers:true,pagination:true">
        <thead>
            <tr>
                <th data-options="field:'id',width:80">编号</th>
                <th data-options="field:'name',width:100">姓名</th>
                <th data-options="field:'age',width:80,align:'right'">年龄</th>
                <th data-options="field:'sex',width:60,align:'center', formatter:convertSex">性别</th>
            </tr>
        </thead>
    </table>
</div>

函数

function convertSex(value, row, index) {
    var link = '';
    if (value == 1) {
        link = '男';
    } else if (value == 2) {
        link = '女';
    } else {
        link = '保密';
    }
    return link;
}

使用js

<table id="dg"></table>

主要属性

$('#dg').datagrid({
    url: 'data.json',
    method: 'get', //默认post
    title: '人员列表',
    pagination: true,
    pageSize: 5,
    pageList: [5, 10, 20, 50],
    rownumbers: true,
    columns: [
        [{
            field: 'id',
            title: '编号',
            width: 150,
            hidden: true
        },
         {
             field: 'name',
             title: '姓名',
             width: 150,
             align: 'center',
             styler: function(value, row, index) {
                 return 'vertical-align:middle;';
             }
         },
         {
             field: 'age',
             title: '年龄'
         },
         {
             field: 'sex',
             title: '性别',
             formatter: convertSex
         }
        ]
    ],
});

更多属性

$('#dg').datagrid({
    url: 'data.json',
    method: 'get', //默认post
    title: '我是标题',
    pagination: true,
    pageSize: 5,
    pageList: [5, 10, 20, 50],
    singleSelect: true, //默认false,可以多选。
    rownumbers: true, // 默认false，默认1，2，3等序号 。加载速度会变慢，建议不用 。
    striped: true, // 默认false,没有条纹
    nowrap: false, //默认true,不换行
    autoRowHeight: false, // 行高 ，默认true

    pagePosition: 'bottom', //默认bottom，类型有：'top','bottom','both'
    fitColumns: true, //默认false, 不固定列。为true时候，所有列平分整个表格宽度，cloumns中width失效,
    fit: true, // 适应父类容器的尺寸，继承panel
    height: 150, //高度设置，继承panel
    pageNumber: 1, //默认1，初始化页码。大于总页码就是最大页面，小于1就是1
    idField: 'id', //主键名称  复选框记住勾选时候需要

    sortName: 'id',
    sortOrder: 'asc',
    frozenColumns: [
        [{
            field: 'name',
            title: '姓名',
            width: 150,
            align: 'center',
            styler: function(value, row, index) {
                return 'vertical-align:middle;';
            }
        }]
    ],
    columns: [
        [{
            field: 'id',
            title: '编号',
            width: 150,
            hidden: true
        },
         {
             field: 'age',
             title: '年龄',
             sortable: true,
             formatter: function(value, row, index) {
                 return '<span title="' + row.name + ":" + value + '">' + value +
                     '</span>';
             }
         },
         {
             field: 'sex',
             title: '性别',
             formatter: convertSex
         },
        ]
    ],
    toolbar: [ //另一种toolbar:'#toolbar'
        {
            text: '查询',
            iconCls: 'icon-serarch',
            handler: function() {
                $.messager.alert('标题', '查询')
            }
        }, '-', //分割线
        {
            text: '修改',
            iconCls: 'icon-modify',
            handler: function() {
                $.messager.alert('标题', '修改')
            }
        }
    ]
});

注意事项

load方法回到第一页，reload方法刷新当前页

combobox

使用方式

使用select

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
	<option value="aa">aitem1</option>
	<option>bitem2</option>
	<option>bitem3</option>
	<option>ditem4</option>
	<option>eitem5</option>
</select>

使用input

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'get_data.php'">

使用js

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
	url:'combobox_data.json',
	valueField:'id',
	textField:'text'
});

样例

<select id="province" class="easyui-combobox" data-options="onChange:changeProv">
    <option value="-1">请选择</option>
    <option value="jiangsu">江苏省</option>
</select>

<select id="city" class="easyui-combobox" data-options="onChange:changeCity">
    <option value="-1">请选择</option>
    <option value="nanjing">南京</option>
    <option value="suzhou">苏州</option>
</select>

<select id="district" class="easyui-combobox" data-options= "valueField:'id',textField:'text', method:'get'">
    <option value="-1">请选择</option>
</select>

<input type="button" value="重置" onclick="reset()" />

// 动态改变combobox数据源
function changeProv(nv, ov) {
    if (nv == "jiangsu") {
        //
    }
    $("#city").combobox("select", "-1");
}

function changeCity(nv, ov) {
    var options = $('#district').combobox('options');
    if (nv == 'nanjing') {
        options.url = 'nanjing.json';
        $("#district").combobox('reload');
    } else if (nv == 'suzhou') {
        // 相当于重新构造地区下拉框组件，不建议使用
        $("#district").combobox({
            url: 'suzhou.json',
            method: 'get',
            valueField: 'id',
            textField: 'text',
            value: '-1'
        });
    } else {
        // 没有使用url，可以不写
        options.url = '';
        $("#district").combobox('loadData', [{
            "id": "-1",
            "text": "请选择"
        }]);
        $("#district").combobox('setValue', '-1');
    }
}

function reset() {
    $("#province").combobox("select", "-1");
}

注意事项

combobox 不可以直接隐藏，可以套一个div或者span，隐藏div或者span达到影藏目的；复杂一点，可以覆盖组合框渲染样式。
combobox 使用setValue方法，无法触发onChange和onSelect事件，需要使用select方法设置值，如$("#province").combobox("select", "-1");。
使用$("#district").combobox({"disabled":true})属性，相当于重新构造下拉框组件，会重新加载URL，并且可能会触发onchange等事件；
建议使用enable和disable方法。

时间组件

easyui-datebox、easyui-datetimebox、easyui-timespinner

datebox选择以后修改显示格式

$("#startDt").datebox({
	onSelect: function(date) {
		$(this).datebox("setValue", $(this).datebox("getValue") + " 00:00:00");
	}
});
$("#endDt").datebox({
	formatter: function(date) {
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		var d = date.getDate();
		m = m < 10 ? "0" + m : m;
		d = d < 10 ? "0" + d : d;
		return y + "-" + m + "-" + d + " 23:59:59";
	}
});

datetimebox 每次打开时间选项框，设置默认时分秒

$("#datetime").datetimebox({
    onShowPanel: function() {
        $(this).datetimebox("spinner").timespinner("setValue", "00:00:00")
    }
})

//使用html形式
<input id="startDtAdd" class="easyui-datetimebox" data-options="editable:false,onShowPanel:showDateTime">

function showDateTime() {
    if (!$(this).datetimebox("getValue")) {
        if ("startDtAdd" == $(this).attr("id")) {
            $(this).datetimebox("spinner").timespinner("setValue", "00:00:00");
        } else {
            $(this).datetimebox("spinner").timespinner("setValue", "23:59:59");
        }
    }
}

窗口

Window（窗口）

使用方式

Html初始化

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true">
    Window Content
</div>

JS初始化

$('#win').window({
    width: 600,
    height: 400,
    modal: true
});

$('#win').window('open');  // 打开窗口
$('#win').window('close');  // 关闭窗口
$("#win").window("center");// 窗口居中

一些属性说明

$("#win").window({
    width: 500,
    height: 350,
    modal: true, // 默认false
    resizable: false, // 默认true
    collapsible: false, // 隐藏折叠按钮， 默认true
    minimizable: false, // 默认true
    maximizable: false, // 默认true
    closable: true, // 显示关闭按钮，默认true
    closed: false, // 默认 false，即打开弹窗
    title: "名称"
});

Dialog（对话框窗口）

对话框窗口的方法扩展自window(窗口)，用法类似。

Messager（消息窗口）

消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

alert(警告框)

$.messager.alert('警告','警告消息');

confirm(确认框)

$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
	if (r){
		alert('确认删除');
	}
});

show

$.messager.show({
    title:'我的消息',
    msg:'消息将在5秒后关闭。',
    timeout:5000,
    showType:'slide'
});
// 消息将显示在顶部中间
$.messager.show({
    title:'我的消息',
    msg:'消息将在4秒后关闭。',
    showType:'show',
    style:{
        right:'',
        top:document.body.scrollTop+document.documentElement.scrollTop,
        bottom:''
    }
});

prompt(提示框)

$.messager.prompt('提示信息', '请输入你的姓名：', function(r){ if (r){ alert('你的姓名是：' + r); } });

$.messager.prompt('提示信息', '请输入你的姓名：', function(r){
   if (r){
       alert('你的姓名是：' + r);
   }
});

progress(进度框)

$.messager.progress();
$.messager.progress('close');

标签：function,false,EasyUI,title,combobox,默认,说明,使用,true
From： https://www.cnblogs.com/saltish/p/16551437.html

EasyUI 使用说明

Datagrid

引入easyui

使用方式

注意事项

combobox

使用方式

样例

注意事项

时间组件

窗口

Window（窗口）

使用方式

Dialog（对话框窗口）

Messager（消息窗口）

alert(警告框)

confirm(确认框)

show

prompt(提示框)

progress(进度框)

相关文章

赞助商

阅读排行