标签：function 控件 常用 dataItem style 介绍 li div id

1.1 Checkbox结合使用

 

 

 

 

 

注：该checkbox与第一列的checkbox不一样，第一列的checkbox表示的是当前行的所有属性，而这个checkbox则是这一行数据对象中的一个属性，具有值得存在并不是表示选中该行。

 

点击列头，表格根据该列首字母排序

 

sortable:true,//排序

可鼠标拉动调整列宽

resizable: true,//可调整列宽

设置表格内滚动

scrollable: true,//滚动条行宽高

初始化不请求数据，大部分用于数据在页面上产生时

autoBind: false,//初始化自动查询

设置表格是否可编辑

editable: true

拓展：设置单独列或单元格是否可编辑

 

 

editable:function (col) {//设置字段是否可以编辑
            if (!this.isNew() || ifNotNull(this.id)) {
                // 已经存在的数据，可以编辑

return true;
            } else {
                // 新增的数据
                if (col == 'employeeId') {
                    return false;//人员ID列不能编辑
                } else {
                    return true;
                }
            }
            return false;

        }

 

 

 初始化（表格生成后）执行方法

此方法在请求数据并渲染表格数据行后立刻执行，多用于表格刷新影响其他元素时：

dataBound: function(e) {

 if(grid._data.length>0){

var foundrow =grid.tbody.find("tr:eq(0)");
grid.select(foundrow); //默认选中第一条数据  

$("#div_new_machining_daily_report").hide();
$("#div_new_machining_daily_report_hide").show();

        }else{

$("#div_new_machining_daily_report").show();
$("#div_new_machining_daily_report_hide").hide();

}

}

延伸：在DataSource（请求成功后、表格渲染前）执行

requestEnd: function(e) {
    var response = e.response; //定义一个response接受控制器传过来的responseData
    var type = e.type;
     if (!response.success){
        Alertbox.alert('info', {
            title: '提醒',
            iconClass: false, //图表类：否
            msg: response.message, //msg属性接收后台传过来的报错信息（通过键值对）
        });
    }
},

 

 

单元格columns

{
     field: "workcellId",
     title: '<@spring.message "dailytemp.workcellid"/>',
     width: 120,

attributes: {style: "text-align:center;"},//居中
headerAttributes: {style: "text-align:center"},//居中

}

 

 

1.8.1 显示template（根据内容、条件显示各种控件）

//显示文本

template: function (dataItem) {
    if (ifNotNull(dataItem.workcellid)) {
        return dataItem.workcellid;
    }
    return '';
}

//显示按钮

template:function (dataItem) {
    return "<i onclick='removeRow(this)' class='fa fa-minus-square' " +
        "style='font-size: 34px;cursor: pointer'></i>";
}

//显示checkbox

template:function (dataItem) {

    if (!!dataItem.eoStaus && (dataItem.eoStaus == 'QUEUING'||dataItem.eoStaus == 'COMPLETED')) {

        return '<span class="k-checkbox fa fa-check check-span checked-span" ' +
            ' data-uid="'+dataItem.uid+'" data-id="'+
            dataItem.id+'"></span>';
    } else if(!!dataItem.eoStaus && dataItem.eoStaus == 'HOLD') {
        return '<span class="k-checkbox fa fa-times check-span unchecked-span" ' +
            ' data-uid="'+dataItem.uid+'" data-id="'+
            dataItem.id+'"></span>';
    }else{
        return "";
    }

}

//显示超链接

template: function (dataItem) {
       if (!!dataItem.id) {
           return '<a href="javascript:void(0);" onclick="assignPosition('+dataItem.id +')"><@spring.message "详细信息"/></a>'
       }
       return '';
   }

 

 

1.8.2 editor

//追加LOV

editor:function (container, options) {
    $('<input name="' + options.field + '"/>')
        .appendTo(container)
        .kendoLov({
            contextPath:BaseUrl,
            locale:_locale,
            code:'JJCY_LOV_DEPARTMENT',
            model:options.model,
            textField:'positionName',
            select:function(e){
                options.model.set("positionName", e.item.osName);
                options.model.set("positionCode", e.item.structureCode);
            },
            query:function(e){
                e.param['structureType'] = 'S';
            }
        });
}

 

//追加数值输入框

editor: function (container, options) {
    $('<input  name="' + options.field + '"/>')
        .appendTo(container)
        .kendoNumericTextBox({
            format:'#####',
            decimals: 1,
            min:0
        });
}

 

//追加下拉框

editor: function (container, options) {
    $('<input name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "meaning",
            dataValueField: "value",
            valuePrimitive: true,
            dataSource: HME_PRODUCTION_CODE,
            change:function () {
                options.model.set('calibrationEditFlag',true);
            }
        });
}

 

//追加日期控件

editor: function (container, options){
    $('<input name="'
        + options.field + '"/>')
        .appendTo(container)
        .kendoDateTimePicker({
            format:"MM-dd HH:mm",
            timeFormat:'HH:mm',
            dataInput:true
        });
}

editor:function (container, options) {
            $('<input name="'

  + options.field + '"/>')
            .appendTo(container)
            .kendoDatePicker({
                format:'yyyy-MM-dd'
            });
}

 

//在dataSource设置统计列的值和方式

aggregate: [
    { field: "qualifiedCertificateCode", aggregate: "count" },
    { field: "qty", aggregate: "sum"}
]

//在columns设置表格底部统计行

{
    selectable: true,
    attributes: {style: "text-align:center;"},
    headerAttributes: {style: "text-align:center"},
    width: 80,
    footerTemplate: "合计"
},
        {
    field: "qualifiedCertificateCode",
    title: '<@spring.message "合格证个数"/>',
    attributes: {style: "text-align:center;"},
    headerAttributes: {style: "text-align:center"},
    width: 120,
    footerTemplate: "<span style='float:right'>#= count #</span>"
},

        {
    field: "qty",
    title: '<@spring.message "总数量"/>',
    attributes: {style: "text-align:center;"},
    headerAttributes: {style: "text-align:center"},
    width: 120,
    footerTemplate: "<span style='float:right'>#= sum #</span>"
}

 

1. LOV

 

<input id="workOrderId"  type="text" class="add_input_required"
       style="width:150px;margin-right:5px;text-align: center;" data-bind="value:model.workOrderId,text:model.workOrderNum" />

$("#workOrderId").kendoLov({
    contextPath:BaseUrl,
    locale:'zh_CN',
    code:'JJCY_LOV_WO_BY_DAILY_PLAN',
    model:viewModel.model,
    textField:'workOrderNum',
    select:function(e){//选择数据出发函数

    },
    query:function(e){
        e.param['workcellId'] = viewModel.model.workcellId;//传入条件参数
    },
    change:function (e) {//数据改变后触发函数
    }
});

新建LOV

在系统管理进行LOV定义

 

 

根据弹出新建页面配置相应信息，Sql id为LOV所调用的SQL语句

还可以配置他的valueField以及textField，宽高等属性。

 

 

1. 下拉框

 

<input id="div_craftwork_type" class="" data-bind="value:model.hmdcCraftworkType,text:model.hmdcCraftworkType" />//input输入框必须绑定viewModel值

 

$('#div_craftwork_type').kendoDropDownList({
    dataTextField: "meaning",//显示文本
    dataValueField: "value",//值
    valuePrimitive: true,
    dataSource: viewModel.model.craftworkTypeList,//数据来源（快码、查询的集合等）

 

change : function(e){//下拉框值改变事件            

 

          }

 

});

 

 

 

 

1. 日期时间控件

//带日期时间控件html

<input type="text" id="workTimeFrom" class="add_input_required" style="width:100%;height: 34px;"
       data-bind="value:model.workTimeFrom"/>

//js代码

$('#workTimeFrom').kendoDateTimePicker({
    format:"yyyy-MM-dd HH:mm",//格式化日期
    timeFormat:'HH:mm',//格式化时间
    dataInput:true,//是否可修改
    change:function (e) {//改变事件后触发的方法
            }
});

 

//带日期控件html

<input class="form-control" size="16" type="text" placeholder="生产日期" id="calendarDay" >

//js代码

$('#calendarDay').kendoDatePicker({
    format: 'yyyy-MM-dd',//格式化日期
    dataInput:true
})

 

 

1. 页面弹窗

//编写div的ID与内容并隐藏

<div id='check-card-dialog' style="display: none">
    <div class="" style="padding-top: 10px;background-color: #2b475b;height: 100%;">
        <input id="check_card_dialog_flag" type="hidden" />
        <div>
            <div class="form-group">
                <label class="col-sm-3 control-label">卡号:</label>
                <input id="inputCardNum" type="number"
                       onkeypress='return( /^[0123456789]+$/.test(String.fromCharCode(event.keyCode)))'
                       style="width:250px;height:40px;font-size: 18px;background-color: rgb(70,112,141)!important;" placeholder="请输入卡号">
                <input id="inputCardType" style="display: none;">
            </div>
        </div>

        <div style="margin-top: 20px;">
            <div class="form-group">
                <div class="button-font" style="text-align: center;margin: auto; height: 60px">
                    <button type="button"  style="border-radius: 50%; height: 50px;width:50px;"
                            onclick="viewModel.checkCard()">
                        <i class="fa fa-check"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

//js代码

$("#check-card-dialog").kendoWindow({
    width: 400,//宽度
    height: 200,//高度
    title: '刷卡',//标题
    modal: true,//模态框
    activate: function () {//初始化执行
        $("#inputCardNum").val('');
        $("#inputCardType").val(e);
        $("#inputCardNum").focus();
    },

close: function () { // 关闭弹框触发函数

    }

});
var dialog = $("#check-card-dialog").data("kendoWindow");
dialog.center().open();//打开弹窗

 

 

1. 按钮控件

 

//自定义图标

 

<button data-bind="click:workView"><img src="${base.contextPath}/resources/ipc/image/工单预览.png"><span  class="ii btn_work_view"></span></button>

 

 

 

//Bootstra icon图标

 

<span class="btn btn-primary" style="float:left;margin-right:5px;" data-bind="click:resend">

 

          <i class="fa fa-random" style="margin-right: 3px"></i>接口重传</span>

 

 

 

图标参考：http://localhost:8080/hmes/sys_icon.html

 

1. TAB标签

<div id="tabstrip">
</div>
<br/>
<div id="tabstrip2" style="width:400px;">
        <ul>
                <li class="k-state-active">Season</li>
                <li>Weakday</li>
                <li>Direction</li>
        </ul>
        <div>
                <ul>
                        <li>Spring</li>
                        <li>Summer</li>
                        <li>Autumn</li>
                        <li>Winter</li>
                </ul>
        </div>
        <div>
                <ul>
                        <li> Sunday</li>
                        <li>Monday</li>
                        <li> Tuesday</li>
                        <li>Wednesday</li>
                        <li>Thursday</li>
                        <li>Friday</li>
                        <li>Saturday</li>
                </ul>
        </div>
        <div>
                <ul>
                        <li>East</li>
                        <li>South</li>
                        <li>West</li>
                        <li>North</li>
                </ul>
        </div>
</div>
<div id="tabstrip3">
        <ul>
                <li>Tab 1</li>
                <li>Ajax Tab</li>
        </ul>
        <div>Content 1</div>
        <div></div>
</div>

 

//js代码

$("#tabstrip").kendoTabStrip({
    value: "Tab1",
    dataTextField: "Name",
    dataContentField: "Content",
    dataSource: [
        { Name: "Tab1", Content: "Tab1: content" },
        { Name: "Tab2", Content: "Tab2: content" }
    ]
});
$("#tabstrip2").kendoTabStrip({
    animation: {
        open: {
            effects: "fadeIn"
        }
    }
});
$("#tabstrip3").kendoTabStrip({
    contentUrls: [
        null,
        "https://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html"
    ]
});

 

 

 

 

 

 

标签：function,控件,常用,dataItem,style,介绍,li,div,id
来源： https://www.cnblogs.com/fuqiang-zhou/p/14233152.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。