easyui 的简单使用

引入js库

    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="./js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="./css/default.css">
    <script type="text/javascript" src="./js/easyui/jquery.easyui.min.js"></script>
    <!-- 导入ztree类库 -->
    <link rel="stylesheet" href="./js/ztree/zTreeStyle.css" type="text/css"/>
    <script src="./js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
    <script src="./js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">

加载功能菜单

// 基本功能菜单加载
 $.post("./data/menu.json",function(data){
                $.fn.zTree.init($("#treeMenu"), setting, data);
            },"json");

切换主题

<link id="easyuiTheme" rel="stylesheet" type="text/css" href="./js/easyui/themes/default/easyui.css">
 // 切换主题
        function changeTheme(themeName) {
            var oldLink = $("#easyuiTheme").attr("href");
            var newLink = oldLink.substring(0, oldLink.indexOf('themes')) + 'themes/'
                + themeName + '/easyui.css';
            $("#easyuiTheme").attr('href', newLink);
        }

datagrid 分页展示数据

$('#grid').datagrid( {
                    iconCls : 'icon-forward',
                    fit : true,
                    border : false,
                    rownumbers : true,
                    striped : true,
                    pageList: [30,50,100],
                    pagination : true,
                    toolbar : toolbar,
                    url : "../../courier_pageQuery.action",
                    idField : 'id',
                    columns : columns,
                    //singleSelect:true    单选
                });

非空校验

$('#save').click(function(){
                    // 判断form元素 是否满足 校验规则
                    if( $("#courierForm").form('validate') ) {
                        $("#courierForm").submit();
                        
                    } else {
                        $.messager.alert("警告","表单中存在非法输入项！","warning");
                    }
                });

添加之前先清空页面数据

//----点击工具栏中按钮要执行的方法----开始
            function doAdd(){
                $(":input","#courierForm").not(":button",":reset","hidden","submit").val("");
                $('#addWindow').window("open");
            }

修改表格数据

function doEdit(){
                // 获取当前datagrid选中数据
                var rows = $("#grid").datagrid('getSelections');
                if(rows.length != 1) {
                    // 没选 或 多选
                    $.messager.alert("提示信息","修改数据时，只能选中一行","warning");
                }else {
                    // 只选中一行
                    var row = rows[0];


                    // 进行表单回显操作
                    $("#courierForm").form('load', row);
                    $('#standard').combobox('setValue',row.standard.name);
                    // 显示窗口
                    $("#addWindow").window('open');
                }
            }

easyui combobox 赋值，取值，默认选中

赋值（多选下拉框选中）

            $('#tvType').combobox('setValues',值.split(',')); 

取值（多选下拉框选中）

           $("#originalCountry").combobox('getValues');

取值（单选下拉框选中）

            //valueField和textField同一属性值。$('#programType').combobox('getValue')获取的值为textField值。

默认选中（单选下拉框）

          $('#upType').combobox('select',‘值’);

            var re = $ht.form.ajaxS(ctx + "/common/fetchProgramType",null,"json");
            if(re =="noRight"){
                return;
            }
            var typeList = new Array();
            typeList.push({ "type":"-1", "type": "全部" });
            if(re.programList!=null&&re.programList!='null'){
                  typeList.push.apply(typeList,re.programList);
            }
            $("#programType").combobox({
                data:typeList,
                valueField:'type',
                textField:'type'
            });
            $('#programType').combobox('select', typeList[0].type);

           var programtype = $('#programType').combobox('getValue');
           if(programtype=='全部'){
              programtype=-1;
            }

            // 播放设置（方式一：默认选中）
              var d = {dictType:"playFlg"};
              var r = $ht.form.ajaxS(ctx + "/common/fetchDictByDictType",d,"json");
              if(r=="noRight"){
                  return;
              }
              var defList = new Array();
              
              if(r.dictList!=null&&r.dictList!='null'&&r.dictList!=''){
                  defList.push.apply(defList,r.dictList);
              }else{
                  defList.push({ "dictCode":"0", "dictName": "暂无" });
              }
              var defvalue="";
              if(re.program.playFlg!=null&&re.program.playFlg!=""){
                  defvalue=re.program.playFlg;
              }else{
                  defvalue=defList[0].dictCode;
              }
              $("#playFlg").combobox({
                  data:defList,
                  valueField:'dictCode',
                  textField:'dictName',
                  value:defvalue

              });

onselect事件赋给id是name的文本框当前下拉框选中的文本值

$("#relationId").combobox({
             onSelect:function(record){
                 $('#name').val(record.name);   // name下拉框的显示的名称
             }
          });