关于easyui datagrid中使用datebox设置默认值的方法

来源：互联网发布：淘宝sony官方旗舰店编辑：程序博客网时间：2024/04/29 20:07

先来个扩展

        $.extend($.fn.datagrid.defaults.editors, {            datebox: {                init: function (container, options) {                    var input = $('<input type="text">').appendTo(container);                    input.datebox(options);                    return input;                },                destroy: function (target) {                    $(target).datebox('destroy');                },                getValue: function (target) {                    return $(target).datebox('getValue');//获得旧值                },                setValue: function (target, value) {                    console.info(value);                    $(target).datebox('setValue', value);//设置新值的日期格式                },                resize: function (target, width) {                    $(target).datebox('resize', width);                }            }        });

关健的一点就是datagrid中datebox的显示格式一定要与datagrid中的格式相同，如databox的格式为：2016-08-04 ，那里这一列的数据格式也必须为这个格式，如“qgdata1":"2016-01-03"

以下是所有全部代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ondate.aspx.cs" Inherits="ondate.ondate.ondate" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <link href="../cs/ui_icon.css" rel="stylesheet" />    <link href="../cs/ui_easyui.css" rel="stylesheet" />    <link href="../cs/ui_demo.css" rel="stylesheet" />    <link href="../cs/qg_css.css" rel="stylesheet" />    <script src="../js/jquery-1.8.3.min.js"></script>    <script src="../js/jquery.easyui.min.js"></script>    <script src="../js/easyui-lang-zh_CN.js"></script>    <script src="../js/jquery.edatagridforondate.js" charset="gbk"></script></head><body>     <script src="../js/jquery.edatagridforondate.js"  charset="gbk"></script>    <div id="buttons" style="align-items: center;">        <a class="easyui-linkbutton" data-options="iconCls:'icon-add'" href="#" onclick="javascript:$('#dg').edatagrid('addRow')">增 加 </a>        <a class="easyui-linkbutton" data-options="iconCls:'icon-save'" href="#" onclick="javascript:$('#dg').edatagrid('saveRow')">保 存 </a>        <a class="easyui-linkbutton" data-options="iconCls:'icon-remove'" href="#" onclick="javascript:$('#dg').edatagrid('destroyRow')">删 除 </a>    </div>    <div style="border: 1px solid #1b76af;">        <table id="dg"></table>    </div>    <script>        var fieldstring = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,editman,convert( varchar(40),qgdate1,23) as qgdate1,qgdate2,datatype,filedid";        $("#dg").edatagrid({            queryParams: {                id: "datatype=N'值班安排管理'",                tbname: "qg_web_ondate",                fieldshow: fieldstring,                fieldorder: "qgdate1 desc"            },            pagination: true, pageSize: 25,            pageList: [25, 35],            width: "1160px", height: "530px",            url: "../handler/for_datalist.ashx",            singleSelect: true,            toolbar: "#buttons",            frozenColumns: [[               { field: "m", title: "值班标题", width: 130, editor: "text" },               { field: "qgdate1", title: "开始时间", width: 80, align: "right", editor: "datebox" },            ]],            columns: [[            { field: "filedid", title: "系统识别号", width: 100 },            { field: "a", title: "公司领导", width: 80, editor: "text" },            { field: "b", title: "工作部", width: 100, editor: "text" },            { field: "c", title: "生术部", width: 150, editor: "text" },            { field: "d", title: "检部", width: 150, editor: "text" },            { field: "e", title: "发行部", width: 150, editor: "text" },            { field: "f", title: "机班", width: 200, editor: "text" },            { field: "g", title: "电班", width: 200, editor: "text" },            { field: "h", title: "自班", width: 200, editor: "text" },            { field: "i", title: "水班", width: 200, editor: "text" },            { field: "j", title: "汽班", width: 80, editor: "text" },            { field: "k", title: "仓库", width: 80, editor: "text" },            { field: "l", title: "其它", width: 80, editor: "text" },            { field: "editman", title: "编辑人", width: 100 },            { field: "datatype", title: "所属类别", width: 60 },            { field: "qgdate2", title: "修订时间", width: 80 }            ]]        });        $.extend($.fn.datagrid.defaults.editors, {            datebox: {                init: function (container, options) {                    var input = $('<input type="text">').appendTo(container);                    input.datebox(options);                    return input;                },                destroy: function (target) {                    $(target).datebox('destroy');                },                getValue: function (target) {                    return $(target).datebox('getValue');//获得旧值                },                setValue: function (target, value) {                    console.info(value);                    $(target).datebox('setValue', value);//设置新值的日期格式                },                resize: function (target, width) {                    $(target).datebox('resize', width);                }            }        });    </script></body></html>

convert( varchar(40),qgdate1,23) as qgdate1 这一名就是格式sql查询出来的时间格式为“2016-01-01”，与datebox中文格式相同

0 0